javascript - テキストが同じ行に収まらない場合は、すべてを表示しないでください

Question

私のウェブサイトには、リンク付きのリストを含む左側のサイドバーがあります。1つのリンクが非常に長い場合、1つの行だけに収まりません。例：'これは非常に長い長い長いリンクです'。このテキストから可能な限り表示するにはどうすればよいですか（たとえば、「これは非常に長い」）が、1行だけに収まるように（1行の幅は200ピクセル）？

Answer 1

CSSを次のように設定します。

overflow:hidden;
white-space:nowrap;

Answer 2

text-overflowあなたが記述したものだけを制御するという CSS3 プロパティがあります。overflow: hidden;とを組み合わせてwhite-space: nowrap;、行末に表示される内容をカスタマイズできます。

ここには、プロパティの柔軟性を説明する優れたドキュメントがあります。しかし、幅を超える行の末尾に省略記号 (…) を追加するだけでよい場合は、次のように記述します。

.sidebar p { /*Or whatever selector matches*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 3

overflow: hidden;設定された幅と高さとともに、容器に塗布します。