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

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

<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;}
时间: 2024-12-22 04:44:08

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

Easyui datagrid 设置内容超过单元格宽度时自动换行显示

datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下: 图1: 图2: 解决方法 定义表格时,设置nowrap属性为false. <table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:

文字内容超出自动换到第二行显示

背景:页面默认显示为图1,当子元素B的内容很多时,显示为图2,且1跟2的布局方式均为右对齐 图1 图2 css样式: .clearfix:after {content: ".";display: block;height: 0;font-size: 0;clear: both;visibility: hidden;} .clear { display: block;clear: both; height: 0;overflow: hidden;} .squre{display: inl

width:100%与绝对定位同时存在,偏移出父级容器

当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外 html <div class="container"> <div class="content">好的</div> </div> css .container { positi

css等比例分割父级容器(完美三等分)

父级容器的宽度一定,要实现子元素等比例完美均分父级宽度,实现方式有哪些? html部分代码: 方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比) 方法二:行内元素(inline-block)+百分比 方法三: 父元素  display:table  +  子元素   display:table-cell 方法四: css3  display:flex:(flex布局) 方法五:栅格系统(bootstrap) 给子元素添加class属性        

CSS清除浮动使父级元素展开的三个方法

点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框. 复制代码 代码如下: <html> <h

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

隐藏超出父元素的子元素的部分:overflow

overflow : 针对超出父级的内容如何显示 值: visible 默认值,超出的内容会显示出来 auto 如果内容超出了父级,那就出现滚动条.如果内容没有超出,就没有滚动条 hidden 超出的内容隐藏掉 scroll 不管内容有没有超出,都会出现滚动条 原文地址:https://www.cnblogs.com/pengc/p/8872452.html

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级