css overflow溢出隐藏(文字溢出时的自动隐藏处理)
我的图书馆
css overflow溢出隐藏(文字溢出时的自动隐藏处理)
overflow 属性说明:
版本：CSS2　 兼容性：IE4+ NS6+　继承性：无语法：overflow : visible | auto | hidden | scroll
相关参数说明如下：
visible:：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。 auto：此为body对象和textrea的默认值。在需要时剪切内容并添加滚动条 hidden：不显示超过对象尺寸的内容。scroll：总是显示滚动条。&使用说明及要点：
◎ 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。◎ 设置textarea对象为hidden值将隐藏其滚动条。◎ 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到◎ 右边或左边（视direction属性设置而定）的单元格。◎ 自IE5开始，此属性在MAC平台上可用。 对应的脚本特性为overflow。
body { overflow: }div { overflow: height: 100 width: 100 }
text-overflow版本：IE6+专有属性　继承性：无div 溢出隐藏 div文字溢出用点(省略号)代替 在div布局中内容溢出了容器，超出了容器所限定的宽度应该怎么办呢？很是疑惑，于是搜集整理一番，发现可以让内容超出容器时超出部分显示省略号，这种做法不仅解决了问题，而且很美观，好了，不多说了，有兴趣的朋友可以参考下 复制代码代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& &html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"& &head profile="http://www.w3.org/c-synd/#"& &meta http-equiv="content-language" content="zh-cn" /& &meta http-equiv="content-type" content="text/charset=gb2312" /& &title&div中溢出文字用点代替的代码&/title& &style type="text/css"& /*&![CDATA[*/ li { width:200 white-space: text-overflow: -o-text-overflow: overflow: } /*]]&*/ &/style& &/head& &body& &ul& &li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li& &li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li& &li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li& &li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li& &li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li& &/body& &/html& TD也可以溢出隐藏显示
或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。
　　table真的过时了么？你真的了解table么？你真的会用table么？
　　打口水仗不是我们要做的，留给那些时间很充裕的人吧。
　　言归正传：
　　不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？
　　是的，事实确实如此，如：复制代码代码如下:&style type="text/css"&table {width:500;}.col1 {width:100}.col2 {width:200}.col3 {width:200}td {white-space:overflow:}&/style&&table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"& &tr& &td class="col1"&神舟 优雅Q400N&/td& &td class="col2"&优雅Q400N，采用Intel Core2 Duo(Merom) TG)处理器&/td& &td class="col3"&迅驰4平台，突出的性价比，漂亮的外观&/td& &/tr&&/table&
运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。
　　看起来，这似乎是table的一个特性，它不能很好的支持{width:*white-space:overflow:}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：&td class="col1"&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&/td&，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏}
　　［解决方案一：］
　　后来有人提到使用百分比宽度就可以了，经测试，确实可以，稍微将第一段的其中几行样式修改一下，其它的不变：
复制代码代码如下:.col1 {width:20%;}.col2 {width:40%;}.col3 {width:40%;}
将修改后的代码运行后，会发现，超出宽度的文字果然被隐藏了，想要的效果似乎得到了。
　　事实上使用百分比宽度确实可以解决这个文字隐藏的问题，但这似乎并不是想要的最佳的解决方案，因为有的时候我们需要的是一个固定的宽度，而不是百分比宽度。
　　而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。
　　［解决方案二：］
　　要达到这个要求，除了使用样式，我们也许还会想到一个许久不用了的标签&nobr&，这个元素的作用就是强制内容在一行显示。以上代码做如下修改，其它则不变：
复制代码代码如下:&table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"& &tr& &td class="col1"&&nobr&神舟 优雅Q400N&/nobr&&/td& &td class="col2"&&nobr&优雅Q400N，采用Intel Core2 Duo(Merom) TG)处理器&/nobr&&/td& &td class="col3"&&nobr&迅驰4平台，突出的性价比，漂亮的外观&/nobr&&/td& &/tr&&/table&
做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。
　　沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。
　　既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？
最佳方案：复制代码代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&meta http-equiv="Content-Language" content="gb2312" /&&title&回头来看看Table：TD也玩overflow:hidden&/title&&style type="text/css"&table {width:500;}.col1 {width:100}.col2 {width:200}.col3 {width:200}th strong {display:width:100%;}tr strong,tr td {white-space:overflow:}&/style&&/head&&body&&table border="1" cellspacing="0" summary="测试"&&thead& &tr& &th class="col1"&&strong&产品名称&/strong&&/th& &th class="col2"&&strong&产品介绍&/strong&&/th& &th class="col3"&&strong&产品备注&/strong&&/th& &/tr&&/thead&&tbody& &tr& &td&神舟 优雅Q400N&/td& &td&优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) TG)处理器&/td& &td&迅驰4平台，突出的性价比，漂亮的外观&/td& &/tr&&/tbody&&/table&&/body&&/html&
运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}
　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。
　　之后会继续写一些关于table的文章，也作自娱之用。
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢[css]处理文字溢出的方案 - 简书
[css]处理文字溢出的方案
、word-break、word-wrap
浏览器默认的换行规则
white-space:
word-wrap:
word-break:
默认情况下：因为white-space:normal是默认值，css规范中要求会自动换行。HTML中文字长度如果超出外层边框是会自动换行的。如果遇到一个长单词。浏览器会先尝试将长单词放在本行，如果文字超出了，那么会自动换到下一行。如果换行之后仍然超出，那就只能溢出了。
word-wrap与word-break的区别
首先来看word-break 属性规定自动换行的处理方法。
使用浏览器默认的换行规则。
允许在单词内换行。
只能在半角空格或连字符处换行。
2.再来看看word-wrap 属性允许长单词或 URL 地址换行到下一行。
只在允许的断字点换行（浏览器保持默认处理）。
break-word
在长单词或 URL 地址内部进行换行。
都与单词内换行有关系。事实上，word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句。
"不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。"
统一不换行，溢出则用省略号表示，css代码如下.ellipsis{
white-space:
text-overflow:/*必须和overflow:hidden,连用才有效*/
自动换行+长单词内部换行，外层框自动承开。要求父级元素都没有高度限制。{
word-break：break-
喜欢讨论问题，热爱探索真理。
love discussion, love grouping for the truth.19421人阅读
HTML/CSS（4）
最左边这栏我不行让他换行，怎么办呢？
下面是解决办法：
table-layout:/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
width:100%;
word-break:keep-/* 不换行 */
white-space:/* 不换行 */
overflow:/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:一起使用*/
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1870702次
积分：15227
积分：15227
排名：第770名
原创：333篇
转载：128篇
评论：393条
(1)(1)(5)(1)(4)(2)(6)(1)(1)(7)(3)(4)(6)(1)(2)(3)(1)(5)(4)(8)(6)(2)(4)(1)(6)(11)(11)(15)(15)(16)(18)(29)(13)(29)(23)(19)(27)(16)(21)(23)(11)(9)(22)(20)(5)(1)(4)(1)(10)(9)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'22:38 提问
CSS设置100%高度溢出的问题
设置了三个div，期望三个div自动铺满浏览器且随浏览器的缩放自动调整宽高，因为设置了border,所以加上了样式box-sizing: border-但是y轴上还是出现了滚动条请教是啥原因，css小白求教
代码如下：
&html style="height:100%"&
&meta charset="utf-8"&
box-sizing: border-
height: 20%;
width: 100%;
width: 25%;
height: 80%;
width: 75%;
height: 80%;
&body style="height:100%;"&
&div class="header"&
&div class="left"&
&div class="right"&
按赞数排序
浏览器的body默认有8px的margin值，设置
body{margin: 0}
其他相关推荐小技巧处理div内容溢出
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了小技巧处理div内容溢出的方法,需要的朋友可以参考下
前几天遇到一个问题，代码是这样一个层次：
代码如下:&div class="province"&&&& &ul&&&&&&&& &li&1&/li&&&&&&&& &li&2&/li&&&&&&&& &li&3&/li&&&& &/ul&&/div&
我设置了div的边框，
要想ul的内容在边框内，
必须设置div高度。
但是，ul内的内容是变化的，内容少的时候就不及div的高度。
不设高度的时候，ul的内容就出现在边框外了。
原来需要设置ul的边框。想想也是，先设置与他关系最近的元素吧。
对于前端不是很专业的同僚来说，写css样式表还是有个规则比较好：
指定css样式要有层次：如上例，定义li的样式 .province ul li{...}
写样式有个大致顺序：容器大小（width,height......）,容器位置（left,margin......）,容器文本（color......）,其他
这样尽可能避免样式覆盖之类的问题。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具