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;
}
Related
i use of display:flex for styling,
it styles elements correctly in chrome, but disrupts in fire fox.
my firefox version:99.0.1
chrome version: 100.0.4896.127 (Official Build) (64-bit).
my main problem:
why this behavior differently in FF & CHROME?
How fix that in FF, that also do not disrupt for CHROME?
.vendor-profile-pins__flag,
.vendor-profile-pins__location-pin {
display: flex;
}
.vendor-profile-pins__flag>img,
.vendor-profile-pins__location-pin>img {
margin-left: 6px;
}
.vendor-profile-pins {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<div class='vendor-profile-pins'>
<div class='vendor-profile-pins__flag'>
<img src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
<span> گزارش این صفحه به ما </span>
</div>
<div class='vendor-profile-pins__location-pin'>
<img src="{{url('/images/icons/vendorPage/pin-alt.svg')}}" alt='pin-alt'>
<span> از تهران، تهران </span>
</div>
</div>
result in chrome( desired, ok!):
bad result in firefoxe( two texts, goes(flows, drops) in second line):
MY answer:
i resolved this problem by this way:
i wrote width:16px; style for both <img> tags and resolved!
my mean of "resolved" is this:
in FF browser, like chrome, two texts, do not over flowed to second line.
but the thing that is important, is this:
in FF, the browser, increases the width of <img> tag, and for this reason, the text of <span> tag, over flows to second line!
but the Chrome, remains width of <img> tag and the width of <span> take width of it's text content(do not need to overflow it's text to second line).
solution in html codes:
insert style of width:16px; to <img> tag:
<img style='width:16px;' src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
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>
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">
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>");