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

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

<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

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

CSS - table超出父级div
用到div包裹table的布局,想要的效果是table的宽度等于div宽度,超出内容省略号显示. 听起来很简单啊,设置table宽度为100%,省略号三行代码往上一粘,心想着大功告成. but!!!! ...
input,textarea元素设置宽度100%超出父元素宽度
<form style="width: 300px;"><input name="tenantIds" placeholder="律 ...
vue在个组件中给body加样式，或者给父级组件元素加样式
在h5项目中,经常遇到不同组件需要不同背景色,通过vue的生命周期来解决. 这组件创建前设置我的样式,销毁之前移除我设置的样式. 用以下方式给body添加样式: <script> expo ...
layUI table 内容超出宽度怎么换行显示，而不是显示省略号
页面里加 .mytable .layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit; white-space:n ...
div中内容文字垂直居中、文字不换行显示省略号
目录 div中文字垂直居中 2.文字不换行,文本溢出显示省略标志 div中文字垂直居中 1.行高法文字的行高和容器的高度相同, p { height:30px; line-height:30px; ...
html去掉父元素样式,CSS清除浮动使父级元素展开的三个方法
一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 为了使父级元素展开,有三种方法: 第一:设置父级元素的高度,但 ...
width:100%与绝对定位同时存在，偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...
echarts生成图表超出父容器问题解决
问题描述: 前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况. 情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况 ...
CSS父级子级学习总结
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1.认识了解简单讲CSS父级 CSS子级是相对而言,如一个DIV "A"被另外一 ...
父级div没高度不能自适应高度的原因——子级使用css float浮动
好久没写博客了,最近捡起前端代码开始码,一些基本的东西都忘记了,觉得自己停滞不前的原因就是没做好巩固--废话我们常常在做盒子嵌套的时候,最外层盒子不想给他设置高度,因为我们填充的内容不确定有多大,一 ...

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

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

最新文章

热门文章