文本在包含空格：nowrap的元素之间没有正确包装 [英] Text doesn't wrap properly between elements having white-space: nowrap

问题描述

如果我给元素 white-space：nowrap 的所有子元素，那么在webkit（和blink）中应该使用的元素之间不会有空白：

HTML技巧

添加一个零宽度空间（ U + 200b < span> ：

  < div class =pairs> 
< span> 
 面包：< / strong> 
< em>地壳< / em> 
< / span> 
&＃x200b; 
< span> 
< strong>西瓜：< / strong> 
< em> rind< / em> 
< / span> 
&＃x200b; 
< span> 
< strong>香蕉：< / strong> 
< em>皮< / em> 
< / span> 
 ... 
< / div> 
  

jsfiddle.net/VJyn2/2

一种更好的HTML技术

为了让这个工作正常进行，所有必要的工作就是将span元素放在HTML中的同一行：

  < div class =pairs> 
< span>< strong>面包：< / strong> < EM>地壳< / EM>< /跨度> 
< span>< strong>西瓜：< / strong> < EM>外皮< / EM>< /跨度> 
< span>< strong>香蕉：< / strong> < EM>剥离< / EM>< /跨度> 
 ... 
< / div> b 
 
 
 $ b 
 nofollow> jsfiddle.net/VJyn2/7  
 
If I give all the children of an element white-space: nowrap, white space doesn't break between the elements where it should in webkit (and blink):

jsfiddle.net/VJyn2
.pairs {
    width: 180px;
    overflow: hidden;
}
.pairs > span {
    white-space: nowrap;
}


<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    ...
</div>
The intention of the CSS is to keep the word pairs together, but allow the text to break between the <span> elements.  This works as expected in IE and FireFox.



But, in Webkit based browsers (safari, chrome, opera), rather than pushing a too-long span to the next line, the span gets clipped.



This is a bug in webkit (and blink), right?  Is there a workaround?
解决方案
As of today (Chrome v42) this bug is no longer an issue.  Chrome has fixed the rendering bug, so the below work around is no longer necessary.

Nothing to see here, move along.



There are a few ways to work around this bug.  Here are three options:

CSS Technique

Use float: left.  Besides making it wrap correctly, this will also collapse the whitespace between the spans, so add a margin-right as well.
.pairs > span {
    white-space: nowrap;
    float: left;
    margin-right: 0.5em;
}
jsfiddle.net/VJyn2/3

HTML Technique

Add a zero-width space (U+200b) between each <span>:
<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    &#x200b;
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    &#x200b;
    <span>
        <strong>banana:</strong>
        <em>peel</em>
    </span>
    ...
</div>
jsfiddle.net/VJyn2/2

A Better HTML Technique

It turns out, all that is required to get this to work properly is to put the span elements on the same line in the HTML:
<div class="pairs">
    <span><strong>bread:</strong> <em>crust</em></span>
    <span><strong>watermelon:</strong> <em>rind</em></span>
    <span><strong>banana:</strong> <em>peel</em></span>
    ...
</div>
jsfiddle.net/VJyn2/7

                        
这篇关于文本在包含空格：nowrap的元素之间没有正确包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！