行番号Nのテキストを切り捨てます。CSS

Question

特定の行でテキスト（またはラインクランプ）を切り捨てる最良の方法は何ですか？

私は8行のテキストで段落がありますが、私は3だけを表示したいと言いますか？

これはCSS経由で可能ですか、それとも別のものが必要ですか？

Answer 1

がn個の行の倍数としてline-heightを設定し、max-heightあなたを見せたい

HTML

<p class="text"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
</p> 

CSS

.text { 
    line-height: 30px; 
    max-height: 60px; 
    overflow: hidden; 
} 

例：line-heightが30pxであれば、例えば、唯一の2行を表示https://jsfiddle.net/rk8y0rsd/

Answer 2

はい、簡単ですが、下の例を見てください。

HTML：

<div class="i-speak-too-much"> 
    Hello I like speak, I live in the future I am the Universe 
</div> 

CSS：

.i-speak-too-much { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; //making dots 
    } 

jsfiddle：https://jsfiddle.net/ot9excbr/