I have scanned through your vast database of question but don't seem to find an answer. I am having Problems with Take the text to a new line - even with space still left on the line before. Here is the code :
p1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p1> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
Now if you were to run it, you would see something like the image below:
Now what would I have liked it to look like is something like this:
Now this is am image of a text box under the tab Editors on the W3School Webpage. I was trying to create similar box for my website - with the Blue side line running all the way down, and with text laid out similar to the W3Schools. But I cant seem to get it right even after spending 5 hours on this very problem. Can anyone help me out?
Regards Satanshu
Use real HTML elements.
p.t1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p class="t1"> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
This works because <p> is a real element and <p1> is not.
And if you are curious to the specifics, the reason why <p1> does not work is not that it is an undefined element. (Otherwise, it wouldn't do anything; it wouldn't even have a left border on the first line.) It is because the error correction routines of your browser considers this an inline element, while <p> is a block element. That's really what's causing the difference in display.
Don't count on error correcting routines solving everything for you though. Sooner or later you'll run into an error that is not handled the same by all browsers, and then you'll be in trouble. Better stick to the rules.
Thanks Chris, It seemed that using tags such has caused the text box to not work as it should. I appreciate you help mate and would look forward to returning the favor in the future.
Regards
Satanshu
Conclusion - Use classes!
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
.w3-code{
line-height: 200%;
border-left: 6px solid blue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
color:#FFFFFF;
background-color: #A9A9A9;
margin:10px 5px 0 0;
}
</style>
</head>
<body>
<div class=w3-code>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>Page Title</title><br>
</head><br>
<body><br><br>
<h1>This is a Heading</h1><br>
<p>This is a paragraph.</p><br><br>
</body><br>
</html>
</div>
</body>
</html>
This is worked for me.
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
Got a problem with comments when there are very long words used, like:
"Pneumonoultramicroscopicsilicovolcanoconiosis"
Since the comment div is kinda small, it goes behind it.
I guess it is a CSS thing, but I just can't figure out what it is.
When normal words are used, text is formatted correctly, as soon as it gets near the right edge of the div, the new line starts.
But long words simply go behind the right edge of the comment div.
What's the good way to fix this?
Sorry for bad English.
Try making use of the css word-wrap property. Specifically, word-wrap: break-word.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
Check out more info on this property if you need more expanation.
I try to turn a PDF book into a mobi book (html), and I also want to recreate the layout.
There, after every break the text is intended one line.
This should be doable with
<body style="text-indent:20px each-line;">
but I'm doing something wrong, as it doesn't work.
I don't want to do this with paragraphs as that also includes a blank line by default, but those breaks don't always mean a entire new paragraph...
each-line is not yet supported in browsers (see text-indent on MDN). However, this is what you will want to use when it becomes available.
Use the semantically correct paragraph tags <p> and use CSS to modify padding/margin as needed.
Paragraphs are the way to go on the markup level. The blank lines you describe, are margins that are added by Web browsers by default. Since you will already be editing the style sheet to add the text indenting, overriding these default margins should be no hassle at all. In fact, the following should be enough:
p {
margin: 0;
text-indent: 2em
}
Why 2em? That means twice the width of the letter m of the typeface the paragraph is set in. So whatever the reader does with his or her personal settings (font size, resolution, et al.), the indenting should be proportional to the text. It is also somewhat of a typographic convention. Of course, you could set this value to a lot of other things, like 20px or 1cm.
When you run the code snippet it will give you example HTML text you can copy and past and play around with.
Hope this helps. As this is a way to put text any way you see fit. Thanks!
<!DOCTYPE html>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1>Example</h1>
<h3 class="small">Put text where you want</h3>
<pre style="font-family:verdana">
This text will keep spacing.
This this line too.</pre>
<h4 class="small", style="text-indent: 50px">
This is how to make the above example, hope it helps:
</h4>
<pre>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1> Example </h1>
<h3> class="small">Put text where you want <h3>
<pre> style="font-family:verdana"
This text will keep spacing as formated in HTML file.
This line too.</pre>
</body>
</html></pre>
REFERENCE:
W3schools.com link to HTML <pre> Tag:
https://www.w3schools.com/tags/tag_pre.asp
W3schools.com link to HTML line height:
https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height
W3schools.com link to HTML <p> tag default options:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_p_default_css</pre>
</body>
</html>
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;
}