次のいずれかを実行できるCSSプロパティがありますか？しかしまず、私に説明させてください。行数や文字数をCSSで制限する方法は？
各アイテムの幅が200pxの石積みレイアウトを想像してください。それぞれ高さ：250pxです。 （これは単なる例です）。
各アイテムにはサムネイルとリンクがありますが、このリンクは2-3行に折り返されることが多く、各アイテムの高さが異なります。
クラス内に最大文字数を設定する方法や、特定の行数の後に折り返しを切り取る方法はありますか？そして、おそらくコンテンツを挿入するためにCSS効果を追加することさえできます： "...";それが切断されたことを示す行末の前に？
何か助けていただければ幸いです。
ありがとうございます。
ただし、それはいくつかの制限がありますが、まだあなたを、スイートかもしれない、text-overflowを試すことができます。
<div id="container">
This is some short content to demonstrate the css-property
text-overflow
</div>
#container{
width:100px;
height:50px;
border:1px solid red;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
文字ではありませんが、要素の幅をピクセル単位で設定し、text-overflowプロパティに "..."を追加することができます。
また、要素の高さをたとえば30pxに設定し、線高CSSプロパティを15pxに設定し、overflow:hiddenを追加することで、行数を制限することができます。そうすれば正確に2行のテキストが得られます。
.twoLines{
height:30px;
line-height:15px;
overflow:hidden;
}
'テキストオーバーフロー：ellipsis'は、おそらく何が必要にclosesestです。ただし、古いブラウザではサポートされていません。 – Christoph
ああ、完璧です。ホワイトスペース、テキストオーバーフロー：省略記号などで囲まれて、私が望むものを正確に与えました。ありがとう。 – popsicle
hehe、私はちょうどあなたのための模範的なフィドルを作成していた、私はあなたのコメントを見た;）あなたの問題はそれで解決された場合、あなたは私の答えを受け入れることができます。幸せなコーディング。乾杯 – Christoph