Can I word wrap to prevent weird one word on second line problems?

Question

Is there a CSS style or a JS library that can be used to prevent weird one word on second line problems? For instance, suppose a div fits this sentence perfectly:

Sign up now and start today!

But then when translated into French, looks like this:

Inscrivez-vous et commencer
        maintenant!

I would prefer that the sentence be split equally balanced, like this:

Inscrivez-vous et
commencer maintenant!

I can't manage these with line breaks arbitrarily, I need a CSS or JS library that just fixes them.

"[Questions asking us to *recommend or find a book, tool, software library, tutorial or other off-site resource* are off-topic](http://stackoverflow.com/help/on-topic) for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." — Mike Cluck, Feb 16 '16 at 20:05
Possible duplicate of [How to define conditional line break in html?](http://stackoverflow.com/questions/20348320/how-to-define-conditional-line-break-in-html) — jperezov, Feb 16 '16 at 20:07
This is called a widow/orphan. There is a specific thread for the matter to supplement the line break solution above: http://stackoverflow.com/questions/4742418/widow-orphan-control-with-javascript There are moe css only solutions listed here: http://stackoverflow.com/questions/7444656/javascript-to-avoid-widows — Radio, Feb 16 '16 at 20:10
If you use the " " line charater it will prevent the two words from being separated on line break. So instead of "commencer Maintenant" you would use "commencer maintenant" — QBM5, Feb 16 '16 at 20:11
you could split sentences into piece of text that can be translated on its own: `Sign up and Start today` turns in `Inscrivez vous and commencer maintenant`. these pieces displayed as inline-block will break line together. — G-Cyrillus, Feb 16 '16 at 20:15
Have you tried applying to your element in CSS `white-space: no-wrap` from the CSS **[white space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)** specification? — AGE, Feb 16 '16 at 20:15

score 0 · Answer 1 · answered Feb 16 '16 at 20:16

Put the text in a span, then use css to set the maximum width of the span. Not sure how you are using javascrip on this, but the following should give you an idea of how to go about it.

html

<span class='texttotranslate'>text to be translated</span>

css

.texttotranslate
{
display: inline-block;//maybe
max-width: 100px;//whatever
}

score 0 · Accepted Answer · answered Feb 16 '16 at 20:58

You can programmatically (i.e. with JavaScript) convert all final spaces in whatever html elements you want to non-breaking spaces.

Run the code snippet below and re-size the window to see the effects of line-wrapping: You will never see a single word on the last line of a paragraph (or long title, or whatever). In this code, you can choose which elements to target, e.g. just paragraphs, or divs and paragraphs, etc. by creating a string containing css notation for the tags of the elements you want modified. Note that the use of the <span> element in the code is simply for demonstration purposes. In real life, leave it out.

To give credit where credit is due, while I was working on this answer, SO contributor QBM5 also suggested the use of non-breaking spaces in this way.

var htmlTagsToModify = "h1, h2, div, p, li";

$(document).ready(function() {
  
  $("button").click(function() {
    $("span").toggleClass("show");
  });
  
  // $(htmlTagsToModify).css({ 'color': 'red' }); 
  $(htmlTagsToModify).each(function(idx, elem) {
    var content = $(elem).html();
    
    var lastSpace = "<span>&nbsp;</span>"; // just use this line for demonstration purposes
    // var lastSpace = "&nbsp;"; // use this line in actual implementations
    
    var modifiedContent = content.replace(/\s+(\S+\s*$)/, lastSpace + "$1");
    $(elem).html(modifiedContent);
  });
});

span.show {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle highlighting of last spaces</button>
<p>Resize this window to observe line-wrapping.</p>

<h1>Lorem ipsum dolor sit amet, est ex soleat deseruisse, cu alia fabulas sit. Et usu aliquid sanctus laboramus.</h1>

<div>Est oporteat principes dissentias cu, ad nec essent invidunt. Illud labore fierent et sea. Sit rebum veritus prodesset ea, vix te duis everti nusquam. Vis ei ludus detracto, vix nihil dicunt facilisi eu. Ut alterum propriae per, tritani consetetur no usu. Eloquentiam disputationi id quo, illud etiam has an.</div>

<h2>Mea ad accusam offendit. Facer convenire his no, causae reprehendunt pri ne. Vim iriure labitur sensibus an.</h2>

<p>Albucius concludaturque vel at. Vocent animal graecis cum et, noluisse principes an quo. Primis minimum cu pro, sit ponderum lobortis mandamus te, ad vis movet equidem. Inermis oporteat aliquando at eam, duo veritus vivendo iudicabit in, ne vitae ubique delicata eam.</p>

<ul>
  <li>Civibus ullamcorper conclusionemque usu at, ignota noster virtute cu his. Id quo ipsum feugait, erat euismod lucilius ut pri, pri at adhuc aliquid adipiscing. Ius te habeo suavitate neglegentur, in ius tota probo. Ut atqui aperiam accusam ius, ludus sadipscing no ius. Cum congue audire ad, at dicat novum meliore his, pri et delenit dissentiunt. Vix mandamus consulatu ut.</li>

  <li>Vide contentiones ad ius, id ipsum meliore nominati duo. Clita scaevola invidunt no has. Eam facete suscipit ut. Duo alterum antiopam philosophia cu, ex eos delicata tractatos. Qui regione meliore ea.</li>
</ul>

Can I word wrap to prevent weird one word on second line problems?

2 Answers2