テキスト、時々ない

Question

問題

テキストはラップされていません。 1つの長い行であるため、適切に折り返すテキストセットが1つあります。しかし、私の他のセットのテキストは、その一部が<br>というタグを持っているのでラップします。しかし、私はまだ非常に長いテキストをページの終わりまで拡張する必要がありますが、代わりにすばやく折り返します。

ライブ例

の例では、あなたが見ることができるように、下の建設についての最初の記事が悪いラップで私はgeovillageva.comでこの投稿を一度にアップしています。 Greetings、Geo Jones、Owner and Developerのタグは<br>です。真ん中にある長いテキストは国境の端に行きます。 2番目の記事は、適切な折り返しの例であり、境界線の端です。

HTML、私はこの問題は、動的に割り当てられた幅で発生する可能性があると思うのナビゲーションバー

<div id=newsboard> 
    <div class=newsboard_topic> 
    <h1>Website in Development!</h1> 
    <p class=newsboard_topic_article> 
     <img class=newsboard_topic_picture src="/image/newsboard/construction.gif" alt="Dev"> 
     Greetings! 
     <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far! 
     <br>- Geo Jones 
     <br>Owner and Developer 
    </p> 
    </div> 
    <div class=newsboard_topic> 
    <h1>kimmy and donald!</h1> 
    <p class=newsboard_topic_article> 
     <img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald"> 
     The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopped it. This is a test by the way to test the standing of articles. 
    </p> 
    </div> 
</div> 

CSS

#newsboard { 
    margin-left: 100px; 
    margin-right: 100px; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    border-color: #0099FF; 
    border-style: solid; 
    border-width: 5px; 
} 

.newsboard_topic { 
    padding: 20px; 
    display: block; 
    border-style: none none dashed none; 
    border-color: #0099FF; 
    border-width: 5px; 
} 

.newsboard_topic_article { 
    display: inline-block; 
    vertical-align: top; 
    word-wrap: break-word; 
    margin: 0px; 
    padding: 10px; 
} 

.newsboard_topic_picture { 
    display: block; 
    float: left; 
    margin-right: 10px; 
} 

Answer 1

含まない、これが唯一のニュースの一部である点に注意してくださいあなたのブロック、あなたはこの解決策をチェックアウトすることができます：

.newsboard_topic_article 
{ 
    display: inline-block; 
    vertical-align: top; 
    margin: 0px; 
    padding: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
    hyphens: auto; 
}