CSS控制LI行字符溢出用省略号代替

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>CSS控制一行字符溢出用省略号代替</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 280px;height:126px; margin: 38px auto;padding: 12px 6px 12px 22px;border: 1px solid #CCC;background: #EEE;}
li { margin: 12px 0; }
li a {display: block;width: 168px;overflow: hidden;/*不能写在最后*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 172px;float: left;}
li:not(p):after {mrc: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>
</head>

<body>
<ul>
<li><a href="/soft/3149.shtml" target="_blank">显示内容1,显示内容1,显示内容1,显示内容1</a></li><li><a href="/soft/3148.shtml" target="_blank">显示内容2,显示内容2,显示内容2,

显示内容2</a></li><li><a href="/soft/3147.shtml" target="_blank">显示内容3,显示内容3,显示内容3,显示内容3</a></li><li><a href="/soft/3144.shtml" target="_blank">显示内容4,

显示内容4,显示内容4,显示内容4,显示内容4</a></li>
</ul>
<div>http://www.999jiujiu.com/</div>
</body>
</html>

时间： 2024-09-30 06:54:42

CSS控制LI行字符溢出用省略号代替的相关文章

用 CSS 控制li列表的长度，让li里面的内容不换行显示，而且让多余li长度的内容用...表示

用 CSS 控制li列表的长度,让li里面的内容不换行显示,而且让多余li长度的内容用...表示,其实实现的方法很简单.我们只需要在对li的css样式进行控制就可以了,具体如下: 1 white-space:nowrap; /*不让文字内容换行*/ 2 overflow:hidden;/*文字溢出的部分隐藏起来*/ 3 text-overflow:ellipsis; /*用...替代溢出的部分*/

CSS控制显示超出部分，用省略号显示

常用,但是常忘,我又不是写css的,所以记下来: 先设置一下限制的宽度, display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; CSS控制显示超出部分,用省略号显示

css实现多行文本溢出显示省略号(…)全攻略

省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程. 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性.  代码如下 复制代码 overflow: hidden;text-overflow: ellipsis;white-spa

css控制显示行数，多出部分显示省略号

webkit-line-clamp:number;控制行数, 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient:vertical;控制文本行数的方向,这是一个 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 . text

CSS控制文本超出指定宽度显示省略号和文本不换行

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

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; } <div id="news_text"> 要溢出去的文字

css实现多行文本溢出显示省略号

<!DOCTYPE html><html><head><style>div.test{width:100px; overflow: hidden;text-overflow: ellipsis;border:1px solid #000000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} div.test:hover{text-overflow:inheri

单行多行文字溢出显示省略号

1. 单行文字 <div class='line'>我是单行文字测试我是单行文字测试我是单行文字测试我是单行文字测试</div> .line{ width:200px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } white-space:nowrap; (强制显示一行)overflow:hidden; (文字超出部分隐藏)text-overflow:ellipsis; (文字超出部分显示省略号)

css中text-overflow:ellipsis文本溢出产生省略号

text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) text-overflow属性仅是注解,当文本溢出时是否显示省略标记.并不具备其它的样式属性定义. 想要实现溢出文本时产生省略号的效果: 必须定义:1.强制文本在一行内显示(white-space:nowrap):                 2.溢出内容为隐藏(