Non breaking space at the end of the line
David
Let's assume I have a paragraph of text. The first one shows what I have at the momment. The second one is what I would like to have. So, it's all about the words that have 3 or less letters at the end of the line. I want them to be at the begenning of the next line.
I could use a non breaking space entity between "tempor" and "ex" words (and so on), but this looks like a lot of job. Since there's no CSS property to handle it, I thought the only reasonable way to work it around is to use some JS to control it. So, all the HTML comes from server without non-breaking lines and then a JS code gets all the text and puts a non-breaking-space sign in the desired places. Are there any ready to use libraries to control it this was? Is this a good way to control it? Is this going to be efficient withing huge blocks of text?
Arnauld
You could use a regular expression using word boundary detection \b to match 1 to 3-character words followed by a space, then replace the space with a non-breakable one.
However, a potential problem with this approach is that any long sequence of short words becomes non-breakable (as a whole).
Below is some example code with an additional highlighting of the blocks that are modified:
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum, mauris eget varius iaculis, lorem dolor luctus ante, sit amet lobortis mauris nibh vitae metus. Quisque imperdiet massa eu consectetur venenatis. Vivamus vitae tortor dolor. Nam ac neque a quam ultrices euismod quis ultricies arcu. Duis feugiat tortor ac enim commodo pharetra. Praesent commodo nisl quis diam consequat molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a leo in elit accumsan maximus. Mauris vitae egestas eros. Quisque a augue a velit suscipit vehicula quis id dui.';
var formatted = text.replace(/(\b\w{1,3}\b) /g, '<span>$1 </span>');
document.getElementById('output1').innerHTML += text;
document.getElementById('output2').innerHTML += formatted;p { width:290px; float:left; margin-left:10px; text-align:justify }
span { background-color:#ff8; border: 1px dotted #777 }<p id="output1"><b>Before:</b><br></p><p id="output2"><b>After:</b><br></p>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Tab space instead of multiple non-breaking spaces ("nbsp")?
- 2
I am looking for alternative to Non Breaking space in HTML
- 3
How to put a non-breaking space in an NSString?
- 4
Is there an alternative to non-breaking space to put space in between text on a line in HTML/CSS?
- 5
non breaking space between labels create a visible space when rendered
- 6
use VBA to identify and remove a non-breaking space character in a spreadsheet
- 7
Mark space for :after content non-breaking
- 8
Strip first space to end of line
- 9
Convert normal space/whitespace to non-breaking space?
- 10
How to disable non-breaking space with altgr+space
- 11
Parsing unicoded file containing non-breaking space character
- 12
How to modify this regular expression to not match a non-breaking space?
- 13
How to append a non-breaking space in a TextBox?
- 14
NSKernAttributeName space at end of line in an NSAttributedString
- 15
Zlib with non-breaking space
- 16
Breaking space (Opposite of non-breaking space)
- 17
Difference between breaking and non breaking space ascii characters
- 18
Non breaking space between two elements
- 19
Chrome JavaScript Errors on Non-Breaking Space
- 20
Mark space for :after content non-breaking
- 21
Strip first space to end of line
- 22
non-breaking space in link
- 23
NSKernAttributeName space at end of line in an NSAttributedString
- 24
Zlib with non-breaking space
- 25
Append non-breaking space behaviour
- 26
Is there an equivalent of "non breaking spaces" for line breaks?
- 27
Unicode non-breaking space is removed end of label
- 28
remove (non-breaking) space character in string
- 29
Non-breaking space not working on Android
Comments