텍스트는 때때로이에 가정 할 때하지

Question

문제

텍스트 포장되지 않은 때로, 뒤틀림. 하나의 긴 줄이기 때문에 제대로 감싸는 한 세트의 텍스트가 있습니다. 그러나 일부 다른 부분에는 <br> 태그가 있기 때문에 다른 텍스트 세트는 줄 바꿈됩니다. 그러나 나는 페이지의 끝까지 확장해야하는 매우 긴 텍스트를 여전히 갖고 있지만 대신 빨리 래핑합니다.

라이브 예

예는 당신이 볼 수 있듯이, 공사중에 대한 첫 번째 기사가 나쁜 포장입니다 내가 geovillageva.com에이를 게시 한 번에 최대입니다. 인사, 지오 존스 및 소유자 및 개발자 용 태그가 <br>입니다. 중간에있는 긴 텍스트는 국경의 가장자리로 가야합니다. 두 번째 기사는 좋은 포장의 예이며 국경의 가장자리입니다.

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; 
}