I encountered a cross-browser issue where a line in a narrow column breaks too early even though there is space left for the last word to fit perfectly. Initially, I suspected a problem with my stylesheet, but the same issue persisted in a simple fiddle I created (no PHP tags, no line-breakers, etc.): I apologize as the content is in Czech language, but it serves the demonstration purpose. The bug appeared in Firefox, Internet Explorer, Chrome on Windows 7 and Windows 8, and even on an iPad.
Link to the fiddle: http://jsfiddle.net/Grows/q9wqeu14/1/
Demo:
HTML:
<div class="column">
<p>We are a team of experienced professionals who will help you with comprehensive IT solutions. We manage IT equipment for small companies with up to ten users, as well as large corporations with hundreds of stations and dozens of servers. The costs for external network management are completely individual and depend on the network scope (number of servers, stations, active devices, etc.), agreed frequency of visits, and guaranteed response times. For small businesses, this amount usually ranges in the thousands of Czech crowns per month, making it more cost-effective than employing an in-house network administrator.</p>
</div>
<div class="column">
<ul>
<li>Individual approach and user-friendly care for computer users</li>
<li>Regular maintenance of computer equipment to minimize downtime</li>
<li>Guaranteed service response to minimize losses caused by downtime</li>
<li>Management of IT processes - we operate a HELPDESK system for reporting service requests, a HOT-LINE telephone line, and an automatic monitoring system NAGIOS that continuously monitors the operation of your key devices</li>
<li>Consulting and advisory services</li>
</ul>
</div>
<div class="column">
<ul>
<li>Financial savings - you only use an IT specialist when needed, saving on payroll costs, professional training, etc.</li>
<li>Flexibility - the service is contractually guaranteed, eliminating the need to manage sick leave, vacations, stand-ins, etc.</li>
<li>Professionalism - we work as a team, have experience, quality technical support, and support from our suppliers. We are able to minimize network downtime risks or shorten them to a minimum.</li>
<li>Transferring responsibility for the smooth operation of your network to the supplier</li>
</ul>
</div>
CSS:
body {
font-size: 14px; font-family: 'Arial'; text-align: left;
}
.column {
width: 214px; border: 1px black solid;
}
li {
list-style-type: disc; list-style-position: outside;
}
My client and I observed a strange break between the 3rd and 4th rows of text, as well as in longer text sections. I tried searching for similar issues here and on Google, but to no avail.
Is this a standard browser behavior or is there something wrong with the code? I'm hoping to avoid using manual line breakers like br, wbr, nbsp, etc.
Thank you!
Cheers, Martin
---- UPDATED ----
Thank you for the suggested solutions so far. There are no extra white spaces in the text, so I can't remove any. The content must remain in three divs.
It seems like some strange behavior related to the Czech language in the browser, but I have never encountered anything like this before.
Perhaps there is nothing I can do about it, and that could be an acceptable answer as well :)
---- SOLVED ---
Emmanuel was correct. There was an issue with some space characters. When I deleted them and added spaces again, the problem disappeared. Thank you so much! If someone can explain this to me, I would greatly appreciate it because there were no visible "white-space" tags in the source code...