(轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html

html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>

css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;

}

/* IE下的样式 */ 
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* FF 下的样式 */ 
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}

时间: 2024-10-29 10:46:33

(轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)的相关文章

新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用‘...’来代替, 我一想 这简单啊 只要给div加上text-overflow:ellipsis;属性就好了呗, 结果 怎么调也不行,你说把我压抑的啊 经过一阵查终于找到原因出在哪里里 原来text-overflow:ellipsis;的属性 得需要另外两个属性的配合才能实现 这俩分别是 over

CSS 溢出文本显示省略号的方法(兼容 IE、FF、Chrome)

text-overflow: ellipsis:该属性用于定义文本溢出的显示方式 css代码: .textEllipsis { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; word-break: normal !important;} Chrome浏览器下显示效果及页面布局: IE浏览器下显示效果:

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

css 溢出文本显示省略号

这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符,但 是通过控制字数来截取的话还是存在一个大问题的,因为中文和英文的字符宽度问题,这个字数不好控制,而且通用性较差.那么有没有更好的方法呢,比如直接用 CSS来解决的,当然是有的. text-overflow是一个

使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题

本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;(其实很久就有了,不过之前都不知道)这个样式可以实现这种效果,而且所有主流浏览器都支持 text-overflow 属性. 于是就用了如下代码 .ellipsis{ width:300px; white-space: nowrap; word-break: break-all; overflow: h

关于溢出、单行文本显示省略号

 溢出属性:   (重要) overflow :visible/hidden/scroll/auto/inherit  值                                    描述 visible                              默认值.内容不会被修剪,会呈现在元素框之外. hidden                             内容会被修剪,并且其余内容是不可见的. scroll                            

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

thinkphp内置截取字符串函数无法显示省略号解决方法

thinkphp内置截取字符串函数无法显示省略号解决方法 functions.php function msubstr($str, $start=0, $length, $charset="utf-8", $suffix=true){ if(function_exists("mb_substr")) {      if($suffix)    {         if($str==mb_substr($str, $start, $length, $charset))

css文本溢出隐藏显示省略号(单行+多行)

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-