Preventing line wrapping within spans of text (to avoid breaking first name from surname in a list of names)

martinu

New member
I have a paragraph which consists of lots of names (forename and surname) listed as a large block "Mike Wilson; Jill Bradshaw; Janet Thomas;" etc. I want to prevent the names breaking between forename and surname, while allowing breaking after the ";" separator.

In an HTML file I've defined a span class with "white-space: nobreak;" and each name is enclosed in <span class="nobreak">John Smith;</span>

The operative code is
<style>
<!-- when wrapping lines, don't break names between forename(s) and surname -->
span.nobreak { display: inline; white-space: nowrap; }
</style>

and
<span class="nobreak">Jane Absolom;</span>
<span class="nobreak">David Adamson;</span>


This has no effect: names still break between Jane and Absolom if they happen to occur at the end of a line.

The annoying thing is that I'm sure this used to work a year or so ago, and the only changes I've made to the page since then (AFAIK) are to add more names enclosed in span tags.

The live page is https://buckinghamshireremembers.org.uk/acknowledgements body.htm ("Individuals" section).
 
It looks as if it's a CSS problem. If I change all the <span class="nobreak"> to <span style="white-space: nowrap;"> thus making it an inline reference rather than one inherited from CSS code, everything works fine.

What embarrassingly naive syntax error have I made with my CSS?
 
Try to add this :

.nobreak {white-space:nowrap;}

You can use your browser's inspector to see if this code appears correctly in the span. Otherwise, the problem lies elsewhere.

More precisions on white-space
 
Last edited:
First, comments are not written like that in CSS. Instead, use
/* comment */

Also, display:inline is unnecessary on a <span> tag since it is already inline.

What you wrote about white-space should work. But indeed, you can use the 'inspector in a browser to understand what is happening.

More details on white-space
 
Back
Top