截断单行的溢出文本

原创 2007年09月29日 09:48:00
     貌似好久以前写过了,找了半天不到!- -

      很多时候文本的溢出会让我们的的页面变得很怪异,不处理又非常别扭,闲得无聊的时候会写段程序控制下,但基本不会有那么闲。

      下面这种CSS方法可以比较简单的对单行文本的溢出进行处理,但让人不满意的地方就是会有被截出不完整的字的情况出现。

      [演示地址:http://www.doyoe.com/model/xhtmlcss/style/tof.htm

CSS部分:

.tof {
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;/*for ie6+*/
}
.tit {
 width:115px;
}
.list {
 width:300px;
 padding:0;
 margin:0;
 list-style:none;
}

XHTML部分:

<!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/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>textOverflow</title>
</head>
<body>
<h3 class="tit tof">传说中的测试test</h3>
<ul class="list tof">
 <li>为防止标题太长而破坏页面的美观性而将超出固定长度的部分截断</li>
 <li>为防止标题太长而破坏页面的美观性而将超出固定长度的部分截断</li>
</ul>
</body>
</html>

      在不支持text-overflow的浏览器下看到的处理的效果不爽,经常有不完整的字出现。要整成ie6那样还得写程序搞定!- - 

      不过要是不在乎被截成这样的话,这种单行文本溢出的处理方案已经很够用了。

 

单行与多行文本溢出显示省略号

需设置宽度才能溢出显示省略号。 单行文本:.am-text-truncate { word-wrap: normal; /* for IE */ text-overflow: ell...
  • a297487901
  • a297487901
  • 2017年09月22日 11:58
  • 121

css实现单行和多行文本溢出显示省略号点点点...

一、单行文本溢出显示省略号点点点... overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 二、多行文本溢出显示省...
  • iceking66
  • iceking66
  • 2017年09月29日 14:33
  • 277

android自定义控件学习(一)单行横向标签并做溢出处理

正式开发android也有一个月左右了,公司的一个小的app基本完成,没什么事干,想起了搞点事。看到别人写的自定义控件用着挺爽的,也想着自己写一个,无奈能力有限,写了第一个属于自己的自定义控件费尽了心...
  • u010544275
  • u010544275
  • 2016年01月15日 13:48
  • 861

用CSS截断字符串 实现文字自动截断隐藏溢出文本

方法一: 任意长度的字符串 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会...
  • my98800
  • my98800
  • 2016年05月03日 08:21
  • 334

li与div自动截断过长文本

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">li { width:200px; white-space:nowrap; text-overfl...
  • wallimn
  • wallimn
  • 2007年10月04日 15:35
  • 2787

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

原文地址:http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/06/1793922.html
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2014年07月21日 10:41
  • 3879

文本溢出(单行和多行)

1.单行文本溢出 overflow: hidden;  //溢出隐藏 text-overflow: ellipsis;  //溢出是显示省略号 flex-wrap: nowrap;  //设置文本...
  • Fancy_Q
  • Fancy_Q
  • 2017年05月18日 09:03
  • 90

H5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容

H5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容...
  • u010670151
  • u010670151
  • 2016年04月27日 08:48
  • 4209

flex布局文本超过截取无效的解决方案

用weui做微网站陷入了flex布局的坑。 flex与text-overflow配合效果一直都不是很理想。查阅了不少资料都无法解决问题(基本上能搜到的资料都是2层结构的,即flex容器与flex项两层...
  • Oudoni
  • Oudoni
  • 2017年03月21日 15:50
  • 982

移动web端css实现文本单行省略及多行省略

单行省略: selector{ -o-text-overflow: ellipsis;/*兼容opera*/ text-overflow: ellipsis;/*这就是省略号喽*/ ov...
  • tyler1108
  • tyler1108
  • 2015年02月06日 12:08
  • 1739
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:截断单行的溢出文本
举报原因:
原因补充:

(最多只允许输入30个字)