Html Question posted in
Some basic documentation can be found here.

In HTML+CSS is there a general way to suppress line breaks between certain characters?

Wikipedia’s standard footnoting produces HTML of the form:

Here is an example sentence with a footnote.<sup>[1]</sup> And continue...

The result generally looks like:

Here is an example sentence with a footnote.[1] And continue…

If the RH side of the display comes close after "footnote." then the result is either:

Here is an example sentence with a footnote.[1]
And continue…

or

Here is an example sentence with a
footnote.[1] And continue…

It always looks humanly clean: it holds together the full stop and superscripted footnote reference so that it never line-breaks. Try it. With any Wikipedia article, gradually resize the browser horizontally so that the text reflows. Observe how the relevant part (equivalent to "footnote.[1]") is never subject to line-breaking.

Yet my own very simple HTML/CSS is subject to line-breaking, so that if the screen width needs to break immediately after the word-plus-full-stop "footnote.", the output can then be the ugly:

Here is an example sentence with a footnote.
[1] And continue…

Yet somehow Wikipedia’s simple ...footnote.<sup>[1]</sup> achieves its cleanness. Note that it is that simple; no <nobr> or similar. What are the relevant parts of HTML (probably more likely CSS), please?

I’ve had a look through the HTML and some of the CSS, but cannot see how they achieve this suppression of line-breaking at such points.

Nor can I see in the HTML and CSS documentation how to achieve it.

Tags:

2

Answers


  1. 0

    Just use the white-space css property and apply the nowrap value to the "sup" tag. So there will be no line break and it will stay stuck to the quote that precedes it.

    Login or Signup to reply.
  2. 0

    I don’t quite understand the specification, but through simple trial-and-error I found that the uncode-bidi: isolate declaration does what you want (at least on my machine):

    p {
  border: 1px solid black;
  overflow: hidden;
  resize: both;
}

sup {
  unicode-bidi: isolate;
}
    <p>
  Here is an example sentence with a footnote.<sup>[1]</sup> And continue...
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search