How to have spans not line-break, but the paragraph still line-break, in Chrome?
Question
As shown below and at https://jsfiddle.net/a6b37kx6/1/ I have a <p> which has been divided into <span> . It is Japanese, and there are no spaces in the text. I don't want line breaks to happen within a span, so I use .word {white-space:nowrap;} in the CSS. (The width and border on the P tag are just to save you having to resize your browser to see the problem; in the real application the paragraph width would be auto.)
This works as expected in Firefox:
but in Chrome using white-space:nowrap on the spans means it appears as one long line. Is this a Chrome bug, and even if it is, is there a workaround?
<html>
<head>
<style>
html {font-size:20px;}
p {width:10rem;border:1px solid black;}
.word {white-space:nowrap;}
</style>
</head>
<body>
<p>
<span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>
</p>
</body>
</html>
1 answers
solution1
3 ACCPTED 2017-01-24 13:50:44
I'm not sure that this is a bug in chrome or something else causing chrome to behave like this.
However, by default, <span> is an inline element. Just make it inline-block and problem will be fixed.
.word {
display: inline-block;
vertical-align: top;
}
html {font-size:20px;} p {width:10rem;border:1px solid black;} .word { white-space:nowrap; display: inline-block; vertical-align: top; }
<p> <span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span> </p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.