CSSの1行あたりの文字数を制限する

Question

ユーザが1行に50文字を投稿すると、CSSでブロック（width:100px;）に50文字が表示されるようにするにはどうすればよいですか。 今、私の見解は以下の通りです。

<div class='example-wrapper'> 
    <%= simple_format(@user.content , class:'example') %> 
</div> 

ユーザー投稿の@ user.content中（改行をせずに）1行に50文字場合、それはbrowser.Iから突き出ていることは、私がoverflow:hidden;を使用することを意味するものではありません。 white-space:normal;を使用していますが、何も変わりません。 エラーは次の画像に示されています。すべての文字を表示したい

どのようにそれを行う方法を教えてください。

今、scssは以下のとおりです。

.example-wrapper{ 
    background-color:red; 
    max-width:100px; 
} 
.example{ 
    max-width:100px; 
    white-space:normal; 
} 

Answer 1

私が正しくあなたを理解している場合、あなたはこのようにワードラップのプロパティを使用することができます。

.example-wrapper { 
    background-color: red; 
    max-width: 100px; 
    word-wrap: break-word; 
} 

.example { 
    max-width: 100px; 
    white-space: normal; 
} 

ワードラッププロパティは、長い単語が破られることができて、次の行にラップすることができます。