Good morning,
Lets say I have a heading such as:
The World Organisation of Bird Watchers
On larger screens, I want to keep the single line.
Typically, as screen width narrows the heading will begin to wrap:
The World Organisation of Bird
Watchers
Instead I would like it to wrap like this:
The World Organisation
of Bird Watchers
The heading would break after Organisation. Can this be done?
Thanks.
<br> 
coothead
Sorry, I should have stated that I want to keep the single-line heading on larger screens.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
font-size: 1.5em;
}
h1 br {
display: none;
}
@media ( max-width: 32em ) {
h1 br {
display: block;
}
}
</style>
</head>
<body>
<h1>The World Organisation<br> of Bird Watchers</h1>
</body>
</html>coothead
Yes, you could try the <wbr> element inserted in the HTML at the point you prefer the break to occur:
<h1>The World Organisation<wbr> of Bird Watchers</h1>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
That really only works for unbroken text I believe as the words will still wrap one at a time 
For modern browsers maybe something like this is worth doing.
Posting before testing, that’s my Modus Operandi. 
And for all browsers, you could try this:
h1 span{
display: inline-table;
}
This will initially break the same as the white-space nowrap, but at continuing to narrow the width the heading will break also in the span. As if the span wasn’t there and avoid an overflow scrollbar.
Yes I was going to suggest inline-block originally but got sidetracked on shiny new stuff
Thank you everyone. I decided to create two different versions of the heading and display each on either a large or small screen.
Generally that’s a bad idea unless they are totally different in design and text content of course and even then I would have reservations.
You don’t really want duplicate content or make assumptions about device sizes not to mention maintenance issues with two types of content to deal with.
In isolated cases it may be ok to do as you have done but as a rule of thumb I would avoid duplicating anything where possible. 
Glad you got something working anyway
Yes, it works fine.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.