I have a <h1> title with a long word, such as the following. The browser width depends on the device of course, but I've noticed that on one of my devices, it looks like this:
which is not a very nice word-breaking.
How to ask the browser to do "nicer" breakings instead?
Example: Internationali-sation or -tion or -on but not n alone in the next line.
Here is how to reproduce the problem (I've hardcoded 260px here just to reproduce what I've seen on my device, but this is not really hardcoded in my code):
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
<div class="a">
<h1>Internationalisation</h1>
</div>
You can manually insert soft hyphen which is visible only on break. It suggests a place where the browser might break that word. Its something like <wbr> but with hyphen. Something like this:
h1 { word-wrap: break-word; }
.small { width:260px; }
<h1 class="small">Internationalisation</h1>
<h1>Internationalisation</h1>
There are a lot of problems with automatic word breaking which usually depends on browser dictionary (hyhphens can be used) or external scripts. You can also read more about it in another questions like Is it possible to enable auto-hyphenation in HTML/CSS?.
The <wbr> tag exists for this purpose.
The HTML <wbr> element represents a word break opportunity—a
position within text where the browser may optionally break a line,
though its line-breaking rules would not otherwise create a break at
that location.
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
<div class="a">
<h1>Internationali<wbr>sation</h1>
</div>
Alternatively you can also add a zero-width space to the word, though that might cause odd behavior when trying to copy the string. (We get some questions here on Stack Overflow where code doesn't work because it contains a hidden zero-width space.)
Well you could prevent breaking altogether...
.a { width: 260px; background-color: yellow; }
h1 { white-space: nowrap; }
<div class="a">
<h1>Internationalisation</h1>
</div>
Or. set spans inside your content to denote where breaking should occur. This is a big ass word, not two separate words so the browser is clueless unless you educate it
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
h1 span { display: inline-block; }
<div class="a">
<h1>International<span>isation</span></h1>
</div>
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve · vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
So whenever I code a new Tumblr theme from scratch the post body always adds unwanted padding to the top and the bottom of the caption/body of the post. This does not occur in quote posts and chat posts, but occurs in text, photo, photoset, video, and audio posts. I'm guessing it's something Tumblr does automatically for you, because when I tested a similar code it worked fine and didn't add the extra padding on the top and bottom. How can I fix this problem? Thanks for the help!
HTML:
<div id="holder">
<div class="post">
<div class="body">
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words
</div>
</div>
<div class="post">
<div class="body">
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words
</div>
</div>
CSS:
#holder {
position: relative;
margin: 40px auto 0 auto;
padding: 20px;
width: 400px;
height: 500px;
background: red;
}
#holder .post {
margin-bottom: 20px;
padding: 20px;
background: green;
}
Tumblr test blog
Are you sure you're talking about padding? I believe what you actually mean is the initial margin the browsers have set for paragraphs (so called User Agent Styles). You can simply remove it like this:
p {
margin: 0;
}
But to keep some space between the paragraphs, you can do this:
p {
margin-top: 0;
margin-bottom: 20px;
}
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.
How to achieve same output without <br>?
<p>hello <br> How are you </p>
output:
hello
How are you
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:
p {
white-space: pre;
}
<p>hello
How are you</p>
Note for IE that this only works in IE8+.
Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.
I suggest using spans that you will then display as blocks (just like a <div> actually).
p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>
Use <br/> as normal, but hide it with display: none when you don't want it.
I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don't have anything personal against <br/>)
While not immediately obvious, you can actually apply display:none to a <br/> tag to hide it, which enables the use of media queries in tandem with semantic BR tags.
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
#media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
This is useful in responsive design where you need to force text into two lines at an exact break.
jsfiddle example
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p> tag it is pretty easy to get whatever one wants.
For preserving line breaks but not white spaces use pre-line (not pre) like in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
SOURCE: W3 Schools
The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
In the CSS use the code
p {
white-space: pre-line;
}
With this CSS every enter inside the P tag will be a break-line at the HTML.
Building on what has been said before, this is a pure CSS solution that works.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
To make an element have a line break afterwards, assign it:
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
source: https://stackoverflow.com/a/36191199/2377343
Here's a bad solution to a bad question, but one that literally meets the brief:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
Use overflow-wrap: break-word; like:
.yourelement{
overflow-wrap: break-word;
}
Maybe someone will have the same issue as me:
I was in a element with display: flex so I had to use flex-direction: column.
For a List of Links
The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.
Here's an example, assuming a table of contents:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
Item A1 Item A2
Item B1 Item B2
</span>
And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
Item A1<br/> Item A2<br/>
Item B1<br/> Item B2<br/>
</span>
Note the advantages of the above solutions:
No matter the whitespace in the HTML, the output is the same (vs. pre)
No extra padding is added to the elements (see NickG's display:block comments)
You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
No float or clear styles affecting surrounding content
The style is separate from the content (vs. <br/>, or pre with hard-coded breaks)
This can also work for loose links using a.toc:after and <a class="toc">
You can add multiple breaks and even prefix/suffix text
Setting a br tag to display: none is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
#media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
I like very simple solutions, here is one more:
<p>hello <span>How are you</span></p>
and CSS:
p {
display: flex;
flex-direction: column;
}
How about<pre> tag?
source: http://www.w3schools.com/tags/tag_pre.asp
The code can be:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS would be:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
You need to declare the content within <span class="class_name"></span>. After it the line will be break.
\A means line feed character.
.class_name::after {
content: "\A";
white-space: pre;
}
You can add a lot of padding and force text to be split to new line, for example
p {
padding-right: 50%;
}
Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.
Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead
it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆
Example
#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}
#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>
<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="container">
<h5>No specaes (not working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
<h1> word-wrap: break-word;</h1>
<div class='flex'>
<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="wrap">
<h5>No specaes (working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!
body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}
h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">
Break right after this
<span>
and before this
</span>
</h1>
Here You can see all other options on codepen:
Injecting a Line Break
A modern and simple solution could be setting the width like that:
width: min-content;
This CSS rule is mostly useful for text content, but not only:
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p {
margin: 20px;
color: #222;
font-family:'Century Gothic', sans-serif;
border: 2px dotted grey;
padding: 3px;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head />
<body>
<p class="max"> Max width available </p>
<p class="min"> Min width available </p>
</body>
</html>
Both Vincent Robert and Joey Adams answers are valid. If you don't want, however, change the markup, you can just insert a <br /> using javascript.
There is no way to do it in CSS without changing the markup.
In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:
clear:both;
In case this helps someone...
You could do this:
<p>This is an <a class="on-new-line">inline link</a>?</p>
With this css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Using instead of spaces will prevent a break.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br /> in your text, then giving it a class like <br class="hidebreak"/> then using media query right above the size you want it to break to hide the <br /> so it breaks at a specific width but stays inline above that width.
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
#media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
This works in Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}