Is there a tag in HTML that will force a line break in my chosen spot if the entire line is too long to fit without wrapping?
Here’s a line that I want you to imagine is very long. It might fit on some screens, but not others.
Without any specific tags, that line and this one could end up wrapping at any point between the words depending on the browser’s text zoom level and screen size. Is there a way to have the browser notice that when it’s too long to fit on one line, it should break at my chosen spot instead of whatever fits? Say I’d much rather each of the sentences appeared on their own line in that case:
Here’s a line that I want you to imagine is very long.
It might fit on some screens, but not others.
It’s not exactly a single tag doing the work, but this is probably the best way to do what you want:
If can’t use the style tag, you could instead use
<span style="display:inline-block;"> Text </span>
around each element you want to stay on one line, if possible. So, for your example, it would look like:
<span style="display:inline-block;"> Here’s a line that I want you to imagine is very long. </span> <span style="display:inline-block;"> It might fit on some screens, but not others. </span>
As noted in the link I provided, is not a solution. It doesn’t set a preferred linebreak. It just adds an extra linebreak in the middle of a word.
If you want lines to break in chosen spots at certain browser widths, but not others, in a responsive website, you could set break tags with classes, and set the classes to break or not break with media queries depending on the browser width. But it’s a bit of a fool’s errand trying to get perfect line breaks as if you’re designing, say, a magazine layout, if I understand what you’re trying to do correctly. I’ve had client requests to break certain lines ‘just so’ and it takes a lot of testing in multiple device simulations to ensure it’s even maybe 90% correct.
Actually, you can make this work: just replace all the spaces in your text with . And then the <wbr> where you want the break. Kinda hacky, but it worked in local testing.
And on further reflection, you don’t even need the <wbr>, unless you really need to (optionally) break in the middle of a word.
It’s not even that hacky, really– stands for “non-breaking space”, which is exactly its purpose. For any sentences you want to keep as a unit, use instead of normal spaces. Keep the normal spaces where you want a break opportunity.
Thanks @Dr.Strangelove, did the trick. I was trying to post some poetry with internal rhymes on another site that allows a subset of HTML in the posts, and I was not liking the places the lines ended up breaking.
it turns out that site did not like <span> in posts, it filtered out that tag for some reason. It accepted although I noticed if I try to edit that post now, all the get stripped out in the editing form, and I have to re-insert them.
Sure thing. Looks like the trick works here, too:
I met a traveller from an antique land, Who said—“Two vast and trunkless legs of stone Stand in the desert. . . . Near them, on the sand, Half sunk a shattered visage lies, whose frown, And wrinkled lip, and sneer of cold command, Tell that its sculptor well those passions read Which yet survive, stamped on these lifeless things, The hand that mocked them, and the heart that fed; And on the pedestal, these words appear: My name is Ozymandias, King of Kings; Look on my Works, ye Mighty, and despair! Nothing beside remains. Round the decay Of that colossal Wreck, boundless and bare The lone and level sands stretch far away.”
Of course, now that I’m looking at how things break when using this trick, I’d rather all the internal rhymes in that poem get their optional line breaks turned on if any of them need it when one of the lines happens to be a shade too long. But this is good enough for that site.
I’m not sure how I’d manage to get all the lines to be the exact same length without specifying a fixed-width font, which this site also does not allow in posts?
Well, not the exact same length, but at least all within a delta of less than the width of a non-breaking space. There would still be some browser widths where some lines would break but not others, but it’d be a fairly narrow window of lengths.
The problem with using is that it stops all wrapping on those spaces entirely. If that’s what’s desired, great. But the method I mentioned will still wrap on spaces if it has to, like if there’s not enough room for it to fit on even two lines.
That’s not what was requested, though–Ponderoid wanted optional linebreaks. If you widen the window, more than one (poem) line can appear on each (rendered) line. Not that you’d actually want to render the poem that way; I just chose one as an example since Ponderoid mentioned poetry.
I gave that a tentative try, and that caused a bunch of extra white-space in the middle of the lines when there was enough room to display an entire line intact, so no-go on that idea.
This site strips <span> tags out when I try to use them. It’s a very limited set of HTML tags they allow; probably the ones they disallow can be abused in various ways.
All of these tricks are ‘hacky’. And that’s about the only way to do it.
Because what you are trying to do is the opposite of what HTML is designed to do. Which is to make the content adjust to fit properly on whatever device is being used to display it. It was designed for content.
But now designers & artistic fads have infiltrates so much that the internet if filled with websites that are pretty, but either don’t work well, or are hard to read the content for many users. Sometimes I’m nostalgic for Gopher.
Content varies in its intended presentation. Not everything fits the “divide into paragraphs and wrap on word boundaries” model. And even within that model, there are questions about whether the text should be justified or not, how that justification is implemented, and so on.
The non-breaking space has a totally legitimate purpose. For example, open compound words like “ice cream” should probably have a non-breaking space between them. You don’t want a line to end with “I went to buy ice” and then start the next line with “cream at the store”.
Using it for a full sentence is a little unusual, but ultimately is just another way for the user to specify the desired formatting. It is still letting the client adjust the text to fit its display, just with a slightly different set of constraints than the default.