I have a link in a navigation menu that doesn't wrap properly on IE10.
When there is a conditional plural using brackets, IE10 cut off the word into 2 separated lines. I am expecting the whole word "link(s)" to go to the next line if there is not enough space, like Chrome is doing.
It's supposed to look like this:
Hello worldddd
link(s)
I tried to use the different word-wrap and word-break attribute but it doesn't fix it. If I use white-space: nowrap, the word doesn't go to the next line. I don't want to force the word to go to the next line for all browsers.
Do you know what I can do to fix this IE issue?
Let's say you have a text like this:
<p>this is a longer <span class="nowrap">test(s)</span></p>
Then all you need to do is apply following CSS:
p {
word-break: break-word;
}
#media all and (-ms-high-contrast:none)
{
/*target IE10*/
.nowrap {
white-space: pre;
}
/*target IE11*/
*::-ms-backdrop, .nowrap {
white-space: pre;
}
}
working jsfiddle - you can resize HTML input area to see the difference
I have a paragraph with alot of text inside but this text is showing all in one line. How can I format this text so it will not mess up my site and not show it in a single line?
Thanks in advance for your help!
Edit:
This is my code:
<div class="catDescription">
<?php echo $this->category->description; ?>
</div>
You can check here what my issue is:
http://complusoft.net/demo-ventus/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=29&Itemid=334
This is because you have only 1 word.
Add word-wrap: break-word;
Like
.catDescription p {
width: 300px;
white-space: normal;
word-wrap: break-word;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
If you set a width for the paragraph then the text should wrap by default, unless specified otherwise, when the width of the paragraph is exceeded.
p {
width: 300px;
white-space: normal;
}
You have a non spaced string, inorder to break that, you will have to assign some fixed width to your paragraph and than use word-wrap property with a value of break-word
Demo
There are different ways to achieve this.
You could use some <br> tags, but looking at your code, I don't think it could be useful.
That's why I'm suggesting you to format your text better. You could style your <div> and your <p> to get a good-looking text. First of all, set a max-width to your div: this way, if a user shrinks the window, or has a very low resolution, your layout is preserved.
.catDescription {
max-width: 1024px; /*Width example, you can ofc change it*/
}
If you have walls of text, line-height property can help you not getting your text too tightened. For example:
.catDescription p {
line-height:130%;
}
Use line breaks: <br>. Insert wherever you want a newline to occur.
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
Give this style to the <p> tag.
p {
word-break: break-all;
white-space: normal;
}
Word wrapping only occurs when there is a word break.
If you have a "word" that is as long as that, then there is no place for it to break.
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.
p { word-break: break-all }
(Note browser support).
Alternatively, you can use overflow to truncate the text if it won't fit in the container.
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
word-break: break-all;
background:red;
}
DEMO
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie.
:%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
This is a little late for this question but others might benefit.
I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.
.p
{
white-space: normal;
overflow-wrap: break-word;
width: 96vw;
}
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
JSFiddle
The solutions is in fact
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word
word-break: is more of pretty brake, will break nicely for example at ? point
normal: same as word-break
If the desired result is to break the line by complete word use:
p { word-break: break-word; }
else you can use:
p { word-break: break-all; }
EASY
p{
word-wrap: break-word;
}
Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.
For others that find themselves here, the css I was looking for was
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.
overflow-wrap demo
add float: left property to the image.
#rb-menu-com li .submenu div img {
border:1px solid #fff;
float:left;
}
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;
}