8

css に div またはクラスが 1 行のテキストであることを確認する方法はありますか。div/class を特定の高さに設定できることは知っていますが、overflow:hidden私がやろうとしていることは奇妙に見えます。

下の図では、右側の div が左側の div よりも大きいことがわかります。曲名を楕円で1行にできれば、どちらも同じ高さになります。これを達成する方法を知っている人はいますか？PS私はphpのようなことをするよりも良い方法が欲しい$song = substr(0, 10, $song)...うまくいけばCSSで何かが可能です。

4

1 に答える 1

16
  1. コンテナに幅を設定します。
  2. 空白を設定: nowrap.
  3. text-overflow: ellipsis を設定します。
  4. オーバーフローを隠す*

デモ: http://jsfiddle.net/jD99d/

.my-class-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
}

https://developer.mozilla.org/en-US/docs/CSS/text-overflowを参照してください

* 「この CSS プロパティは、オーバーフローの発生を強制しません。オーバーフローを発生させて text-overflow を適用するには、作成者は、オーバーフローを非表示に設定するなど、要素に追加のプロパティを適用する必要があります。」

于 2013-02-27T23:50:58.383 に答える