How can I prevent having just one hanging word on a new line in an HTML element?

前端 未结 3 1640
借酒劲吻你
借酒劲吻你 2021-02-05 04:37

I\'m building a simple webpage with some marketing content. One thing I don\'t like is that if a line of text is too long, it will wrap onto the next line, which is fine

相关标签:
3条回答
  • 2021-02-05 04:50

    EDIT: The best answer is much cleaner -- you should probably use that instead. I'm leaving my answer up because it does work and it has some value for weird cases (e.g. if you're using a dash instead of a space, if you don't want to use  , etc).


    Here's a neat little solution. Create a CSS class like this:

    .nobr { white-space:nowrap; }
    

    Any element with the class "nobr" will not be allowed to wrap white-space (spaces, tabs, etc) onto new lines. So just surround the last two words of your text with a span.nobr.

    <p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>
    
    0 讨论(0)
  • 2021-02-05 04:50

    I would use a <nobr>last two words.</nobr> tag.

    This also gives the benefit of not cutting off any HTML flourishes you may be doing, eg:

    <b>&ldquo;</b>Here's a big statement I don't want <nobr>cutting off<b>&rdquo;</b>.</nobr>
    
    0 讨论(0)
  • 2021-02-05 05:06

    The simple solution is to use a non-breaking space between the last two words at the end of a paragraph.

    &nbsp;
    

    <p>Such and such doesn't have to be difficult. Such and such product makes it&nbsp;easy</p>
    

    This could get tedious if you have a lot of content and especially if it is business controlled. In that case you may be able to find a library or write a solution that automatically inserts the non-breaking space between the last two words of every paragraph for you.

    Try this: https://matthewlein.com/tools/widowfix

    0 讨论(0)
提交回复
热议问题