CSS文字溢出部分自动用"..."代替

如html部分：

<h4>&lt;马尔代夫双鱼岛Olhuveli4 晚6 日自助游&gt;</h4>
<p>上海出发，机+酒包含:早晚餐+快艇</p>

CSS样式

#tour h4{
    white-space: nowrap; /*文本不换行*/
    overflow: hidden;  /*溢出部分隐藏*/
    text-overflow: ellipsis; /*溢出部分用"..."代替*/
}
#tour p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

当页面缩至一定大小时，效果如下：

时间： 2024-10-13 12:18:50

CSS文字溢出部分自动用"..."代替的相关文章

CSS 文字溢出处添加省略号

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

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;/* 不换行

css控制文字溢出用点(省略号)代替

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. 示例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="

css解决td单元格内文字溢出

td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~ 俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美观~ ~解决办法~ 第一步:<table>标签加样式:style="table-layout:fixed;"(一定要加,否则下面定义的td的样式都不起作用了) 第二步:<td>加样式:

CSS之文字溢出处理

1.单行文本之三剑客 <p>刘诗诗,原名刘诗施,1987年3月10日出生于北京市,中国内地影视女演员.影视出品人.</p> p{ border: 1px solid red; width: 400px; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 当边框包不住文字时,首先使用nowrap属性设置为一行显示,文字溢出部分使用hidden把它隐藏,隐藏之后用“...”形式

文字溢出容器问题

一般的文字截断(适用于内联与块): Example Source Code[www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与ov

CSS文字折行与省略号

css3文字溢出显示省略号

text-overflow text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出. 语法: 1 text-overflow:ellipsis;/* 表示省略标记 */ 2 text-overflow:clip;/* 表示剪切 */ 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢

td文字溢出显示省略号

昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflow:ellipsis;//显示省略号 } 然后查了查网上遇到的类似问题,用table-layout:fixed;可以解决此问题,但是我发现这个方法并不完美,甚至改变了我设置的td的大小,本来以30%和70%的显示的td,设置此属性之后居然以50%和50%显示,这就让我不爽了.于是乎花了好长时间解决这