13

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

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

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

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

どんな助けでも大歓迎です。

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

4

2 に答える 2

25

あなたは試すことができます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;   
}​
于 2012-12-11T10:00:11.713 に答える
9

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

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

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
于 2012-12-11T09:59:15.707 に答える