web-dev-qa-db-ja.com

cssで行または文字数で文字制限を制限するにはどうすればよいですか？

次のいずれかを実行できるcssプロパティはありますか？しかし、最初に説明させてください。

各アイテムの幅が200pxの石積みレイアウトを想像してください。それぞれが高さになります：250px; （これは単なる例です）。

各アイテムにはサムネイルとリンクがあり、多くの場合、このリンクは2〜3行に折り返されるため、各アイテムの高さが異なります。

クラス内の最大文字数を設定したり、特定の行数の後の折り返しを切り捨てたりする方法はありますか？そしておそらくコンテンツを挿入するためにいくつかのCSS効果を追加します： "...";それが切り取られたことを示すために行末の前に？

どんな助けでもありがたいです。

ありがとうございました。

csslayoutword-wrapcharacter-limit
13
popsicle

あなたが試すことができます 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;   
}​
25
Christoph

文字ではありませんが、要素の幅をピクセル単位で設定し、「...」を追加する text-overflow プロパティを使用できます。

また、要素の高さをたとえば30pxに設定し、line-height CSSプロパティを15pxに設定してoverflow:hiddenを追加することにより、行数を制限できます。これにより、正確に2行のテキストが表示されます。

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
9
Viktor S.