htmlのテキストを切り詰めるには

Question

htmlページのテキストを切り捨てたいとします。

のstyle.css：

p { 
height: 30%; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

index.htmlを

<p> 
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</p> 

私はそのような結果を取得したい：

hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhh... 

をしかし、私は使用してこの結果を得たことはできませんstyle.cssを参照してください。どうすれば修正できますか？

Answer 1

CSSルールword-wrap: break-word;は、あなたのような長い単語であっても、divの最後で改行するよう強制します。また、divの幅を制限することで、postetと同様の効果が得られます。

p { 
 
    height: 30%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    word-wrap: break-word; 
 
    width: 200px; 
 
}

<p> 
 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
 
</p>

Answer 2

あなたは多分（注）この

p{ 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 3; 
 
    -webkit-box-orient: vertical; 
 
    max-width: 200px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    height:56px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>

を探して：その唯一のWebKitブラウザ上で動作

Answer 3

ここではそれがn個あるものですあなたのレイアウトを壊すような長い言葉が導入されることが予想されるときに口頭で使用されます。

p { overflow-wrap: break-word } 

これにより、2つの文字の間に改行が入ります。

word-break: break-all 

...中国語、日本語、韓国語がフィールドに挿入されていると思われる場合は、