CSS文字折行与省略号

发表于2011/04/22

相关的几个属性和w3schools的参考如下：

word-warp 属性设置如何处理单词的折行
http://www.w3schools.com/css3/css3_pr_word-wrap.aspword-wrap: normal | break-word

word-break 属性设置如何处理单词折断，仅支持IE
http://www.w3schools.com/css3/css3_pr_word-break.aspword-break: normal | break-all | hyphenate

overflow 属性设置如何处理内容超出元素边框的情况
http://www.w3schools.com/css/pr_pos_overflow.aspoverflow: visible | hidden | scroll | auto | inherit

text-overflow 是一个比较特殊的属性，对于超出元素边框用省略号显示总的来说目前没有完美的css的solution，需要借助javascript的帮助

text-overflow: clip | ellipsis | ellipsis-word
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

Opera -o-text-overflow
Firefox3 不支持可以用-moz-bing解决这个问题 (https://developer.mozilla.org/En/CSS/-moz-binding)

帮助

<title>文字折行与省略号</title>

<style type="text/css">

p.nowarp {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;/*Not working in FF*/

}

p.warp {

overflow: hidden;

white-space: normal;

word-warp: break-word;

word-break: break-all;/*Only work in IE*/

text-overflow: ellipsis;/*Not working in FF*/

}

</style>

</head>

<body>

<div style="width: 300px; border: 1px solid red;">

<p class="nowarp">

禁止换行，且用省略号表示超出的部分，哈哈哈哈哈哈哈哈啊哈哈啊哈哈

</p>

</div>

<div style="width: 300px; border: 1px solid red;">

<p class="warp">

自动换行，veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong

</p>

</div>

</body>

IE和FF下的显示效果

时间： 2024-08-01 22:36:43

CSS文字折行与省略号的相关文章

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行

div css文字字体行高行距深入理解css行间距设置

div css文字字体行高行距深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距为了观察到行距设置效果,新

css 文字超出部分显示省略号(原)

单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} 兼容写法(但是当文字不够长的时候省略号还是会存在,需要js判断一下) #word

css文字不换行加省略号

记录一下css文字应用 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

CSS 文字溢出处添加省略号

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

css——文字超出范围以省略号（...）显示

css部分: overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; width是一个固定宽度. 对于低版本的Firefox,有两种方法解决. 1.使用jQuery ellipsis plugin插件 $(document).ready(function(){ $('.ellipsis').ellipsis(); } 2.使用ellipsis.xml,并与css文件在同一目录下

css实现文字过长显示省略号的方法

<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字

文本折行

文字折行跟滚动相似的地方就是显示不下. overflow-wrap(word-wrap) 通用换行控制,以前用的是word-wrap,但是跟word-break太相似了,所以在新的规范中进行了修改 -是否保留单词 word-break 针对多字节文字 -中文句子也是单词 white-space 空白处是否断行 <style> .c1{ border: 1px solid; width: 8em; overflow-wrap: normal; word-break: normal; white-

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折行 word-break:break-all; 英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行令拓展: word-spacing :5px; 单词/字符之间间隔距离 white-space是字符是否换行显示的. 原文地址:https://www.cnbl