I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre.
Is there any other way to display the text on multiple lines without white-space: pre? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?
Here's what I have:
.gallery-Gcontainer {
margin: 0 !important;
padding: 0;
}
#genericpartTitle,
.content {
padding-left: 20px;
}
.content .sidebar,
.content section {
display: inline-block;
width: 30%;
border: none;
vertical-align: top;
}
.content .sidebar img {
width: 200px;
}
<div class="gallery-Gcontainer">
<div class="header-area">
<h3 id="genericpartTitle">my page</h3>
<hr>
</div>
<div class="content">
<div class="sidebar">
<img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" />
</div>
<section>
<h5 class="item-title">Welcome to my first page</h5>
<p style="white-space: pre" class="description">
Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
</p>
</section>
</div>
</div>
Update:
Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.
Instead of white-space: pre use white-space: pre-line.
From MDN:
The white-space
property
The white-space property is used to describe how whitespace inside
the element is handled.
normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as
necessary to fill line boxes.
nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.
If possible then use below javascript code for CSS .
var ss = " Hello`, anything will go here, text will come from the server like this, and I need to display it on multiple lines.";
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br/>');
or
document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');
<p id="test"> </p>
use "display:block" as your css styling. This should break onto new line.
<p style="display: block" class="description">
Related
I can't understand why there is an empty space on the top. I haven't applied any styles to it
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
pre has white-space: pre default style. From W3Schrools about white-space: pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
Of course you can move pre's content to one line but not sure this will flexible and maintainable.
So you can change white-space CSS property to normal or nowrap (depending on need of wrapping):
pre {
white-space: nowrap;
}
.codeBlock ol, li {
margin: 0;
}
<pre>
<div class="codeBlock">
<ol>
<li>(function() {</li>
<li>function $codeBlock() {</li>
<li>return {};</li>
</li>}</li>
</ol>
</div>
</pre>
If you want to return white-space behaviour for ol you can also set
.codeBlock ol { white-space: pre }
Ok so heres the thing. pre takes every character and interpret it in it's display, that mean it will litterally "show" a carriage return. Try to remove the spaces. Lets say you you twig, apply {% spaceless %}. If you use something else, use the proper function, but if you do it manually, do like i just did in the example below :) Cheers
<pre><div class="codeBlock"><ol><li>(function() {</li><li>function $codeBlock() {</li><li>return {};</li><li>}</li></ol></div></pre>
Why would
<div id='dD' class='cs'>
<p class='c cB'>
<span>X</span>
<span>X</span>
</p>
</div>
display like this
in Chrome, Firefox, Opera, Safari
but this
<div id='dD' class='cs'>
<p class='c cB'>
<span>X</span><span>X</span>
</p>
</div>
displays like this
I wouldn't expect a whitespace newline to have any impact on the way HTML is rendered.
I can rectify this by applying
display: block;
or
display: inline-block;
to the spans (not sure which is the better choice)
but don't understand why the browsers render differently because of a whitespace newline.
Apparently, the default behavior is to treat new lines as spaces.
That one space was enough to wrap the text beyond the width and render on separate lines.
Removing the newline removed the space so the Xs get rendered on the same line.
Adding
.c span {
display: block;
}
forces each X to be treated as a block and rendered on separate lines, which is what I want.
Try this
.cB {
word-wrap: break-word;
}
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
My css:
.testBox {
width: 100px;
height: 200px;
border: 1px solid;
word-wrap: break-word;
word-break: normal;
}
My HTML:
<div class="testBox">
<p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元<span>人</span><span>民</span><span>币</span><span>。</span>这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
<p>中新网北京1月4日电(记者 俞岚 周锐)中国对3.53亿元人民币。这也是迄今为止中国开出的金额最高的一张价格违法罚单</p>
</div>
<div class="testBox">
<p>123456789<span>a</span><span>b</span><span>c</span><span>d</span>efghigkilmnopqrstuvwxz</p>
</div>
<div class="testBox">
<p>123456789abcdefghigkilmnopqrstuvwxz</p>
</div>
Please pay attention for “亿”！after that , there is a break-word in Chrome,but not in IE When
I've made some "span" wrapping the character.....why??? how to write to get the same effect
In the CSS documentation:
The word-break property specifies line breaking rules for non-CJK scripts.
Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.
So, I guess it doesn't work for CJK Scripts...
Use
word-break: break-all;
According to the CSS3 Text draft, such a setting allows a line break between any two letters. It adds: “This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.”
The value normal means that “words break according to their usual rules”, which are more or less browser-dependent.
I have this html
<div class="externalWidth">
<div class="container">
<div class="element">this_is_a_really_long_text_without_spaces</div>
<div class="element noWrap">:-)</div>
</div>
</div>
<div class="externalWidth">
<div class="container">
<div class="element ">this is a really long text without spaces</div>
<div class="element noWrap">:-)</div>
</div>
</div>
and this css
.externalWidth { width: 200px; }
.container { margin-bottom:10px; display:inline-table; height:40px; width:100%; }
.element { display:table-cell; }
.noWrap { white-space:nowrap; }
I have made an jsfiddle to demonstrate it. The texts in both .elements are read from a server and bound via knockout. I want this to look as follows:
the second .element should have as much space as it needs
the first .elementshould have the remaining space. It should break into multiple lines if possible.
Everything works fine but long words causes the whole table to expand. Is it possible to break within words if necessary?
I've also tried table-layout:fixed; but that made two 100px colums.
Edit: Thanks. word-break: break-all; did exactly what I needed.
Use CSS word-break Property
try this DEMO
You could "pre-process" your content (on the server or in JS if you can't do this on the server) to inject a soft-hyphen into very long words. is the entity to use, and this will allow modern browsers to break at the soft-hyphen as required, but when it is not required, there won't be a visible gap in the letters.
word-wrap: break-word;
word-break: break-all;
To add a pre-process option, you could use the html tag <wbr/>, the word break. It does the same thing as the soft hyphen (), but without adding an unsightly hyphen when it breaks :) here's a forked fiddle for you.
Just insert the tags after every underscore. In javascript:
str.replace(/_/, "_<wbr>");