CODEWITHSUNDEEP
htmlcssgoogle-chromewhitespace
Darren Cook
Darren Cook

Reputation: 28928

How to have spans not line-break, but the paragraph still line-break, in Chrome?

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:

enter image description here

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>

Upvotes: 3

Views: 2128

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 4

Related Questions