Geocrafter Geocrafter - 1 month ago 23
CSS Question

Text sometimes warping, sometimes not

Problem

Text is not wrapping when it is suppose to. I have one set of text that does wrap properly, because it is one long line. However, my other set of text dosent wrap because some parts of it has a
tag. However i still have a very long text that should extend to the end of the page, but it wraps quickly instead.

Live Example

The example is up at the time i posted this at geovillageva.com As you can see, the first article about Under Construction is the bad wrapping. I only have
tags for Greetings, Geo Jones, and Owner and Developer. The long text in the middle should of went to the edge of the border. The second article is an example of good wrapping, edge of the border.

HTML, Keep in mind this is only the news part, not including nav bar

<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

I think this issue can occur with dynamically allocated width of your block, you can check out this solution:

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