多语言样式容器内容超出父级宽度不换行显示

一个经典的左右浮动布局；

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

wrap层宽度为1000px;

在英文布局下，左右浮动计算好宽度或者不给宽度，都没问题，但是项目引进了多语言翻译后，遇上俄语，法语，意大利语这些单词词组比较长的时候，就会出现left层加上right层的总宽度超过wrap层的情况，然后right层就会有跳行的BUG；

BOSS希望是不要换行，经过测试后，发现这样一种奇怪的布局方式：

wrap层宽度1000px不变；

left层浮动；

right层不浮动，右对齐，子元素不给宽度，用inline-block + IE hack兼容IE，加不换行代码：white-space: nowrap;

这样布局后，left层 + right层总宽度超出wrap层的宽度后，right层内容会被推出去，超出wrap右边，继续不换行显示；

right层css：

.right{ color:#ffffff; line-height:38px; text-align: right; white-space: nowrap;}

 

转载于:https://www.cnblogs.com/3box/p/4968655.html