css word-wrap：break-wordは機能しません

Question

私は2つのインラインスパンを持っています。コードサンプル：

<div class="comment_content"> 

     <span class="comment_author"><?= $child_comment['comment_author'] ?></span> 
     <span class="comment_text"><?= $child_comment['comment_content'] ?></span> 

    </div> 

そして、SCSSサンプル：

.comment_content {   
    word-wrap: break-word; 
} 
.comment_author { 
    display: inline-block; 
    vertical-align:top; 
} 
.comment_text {    
    display: inline-block; 
    word-wrap: break-word; 
    width: 100%; 
} 

私の予想ビューがなければならない場合は、次の

ユーザーはスペースなしの文字列を入力した場合、文字列が中断されません。そして、デザインを破る：

どのように適切に長い単語を壊すのですか？

Answer 1

word-breakスタイルを使用して、を定義します。ここで、は、次の行に改行します。デフォルトでは、スペースやハイフンを使用していますが、任意の文字に破壊できるようにbreak-allに設定することができます

.comment_text { 
    display: inline-block; 
    word-wrap: break-word; 
    word-break: break-all; 
    width: 100%; 
} 

Answer 2

あなたがここに

word-break: break-all; 

参照フィドル

fiddle

Answer 3

を使用することができます

.comment_contentクラスでword-break: break-all;を使用してください。適切に長い単語を破るために

Answer 4

それは私はこのようなヘルパークラスを定義し、適用することをお勧めし、いくつかのCSSプロパティを組み合わせることが必要です。

.break-long-words { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    word-break: break-all; 
    word-break: break-word; 
    hyphens: auto; 
} 

プロパティは、次のように説明し

• オーバーフローラップをワードラップは同じもののためにaliasesですが、一部のブラウザではサポートされていないブラウザもあります。 （
• ワードブレークはもともとCJKで特定の動作を必要とするためのものです...彼ら は言葉を破る公式「正しい」方法ですが、彼らは、我々はより多くを必要とするので、ダイナミックな幅を持つ要素には影響しません。中国語、日本語、韓国語）のテキストを扱いますが、 ワードラップと似ていますが、WebKitのbreak-all値ではすべての場所が破損します。そのため、標準でないWebKitのみのbreak-word値を に記述する必要があります。
• また、ブレーク・ワードがハイフンを持つのが理にかなっていれば（つまり、おそらくそうでない場合は）、 がサポートするブラウザでhypensを使用できます（Firefox、Safari、Edge、IE 10+ ）。また、Firefoxのhypensはword-brake というプロパティを持っていると機能しないので、固定幅のコンテナがない場合は、FFのハイフンかレガシーサポートのどちらかを選択する必要があります。

これは完全なverisonであるよりも、あなたがAutoprefixerのようなものを使用していない場合、私は、ベンダープレフィックスを省略したが注：これは参考になる

.break-long-words { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
} 

Answer 5

Iの事。あなたの場合は特にwidthを指定する必要があります。ここで

.comment_content{ 
 
    width:500px; 
 
    border:1px solid #ccc; 
 
} 
 

 
.comment_author{ 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.comment_text{ 
 
    width: 400px; 
 
    word-wrap: break-word; 
 
    display:inline-block; 
 
}

<div class="comment_content"> 
 

 
     <span class="comment_author">Hello</span> 
 
     <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span> 
 

 
    </div>

あなたが望むものを達成するための作業の例です：examples