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

Question

私のウェブサイトには、リンク付きリストが含まれている左側のサイドバーがあります。 1つのリンクが非常に長い場合は、1つの行に収まりません。 たとえば、「これは非常に長い長いロングリンクです。 このテキストからわかりやすいように表示するにはどうすればよいですか（「これは非常に長いです」など）、1行に収まるように（1行に200ピクセル幅があります） CSSを設定し

Answer 1

：

overflow:hidden; 
white-space:nowrap; 

Answer 2

は、設定された幅と高さとともに、容器上にoverflow: hidden;を適用します。

Answer 3

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

この資料は、hereというものがあり、プロパティの柔軟性について説明しています。しかし、あなたがしたいのは、幅を超える行の最後に省略記号（...）を付け加えることだけです。

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