CSS文章过长显示省略号的方法-白红宇

CSS文章过长显示省略号的方法

阅读量：5144 次

发布时间：2019-06-13

本文共 1177 字，大约阅读时间需要 3 分钟。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>css把超出的部分显示为省略号的方法兼容火狐_脚本之家_www.jb51.net</title>

<style>

* { margin: 0; padding: 0; }

a { text-decoration: none; color: #000; }

a:hover { text-decoration: none; color: #000; }

ul {

width: 300px;

margin: 40px auto;

padding: 12px 4px 12px 24px;

border: 1px solid #D4D4D4;

background: #F1F1F1;

}

li { margin: 12px 0; }

li a {

display: block;

width: 80px;

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: 170px;

float: left;

}

li:not(p):after {

content: "...";

float: left;

width: 25px;

padding-left: 5px;

color: #000;

}

</style>

</head>

<body>

<ul>

<li><a href="#">suntear的技术空间</a></li>

</ul>

</body>

</html>

转载于:https://www.cnblogs.com/tonykan/archive/2013/01/15/2861895.html

你可能感兴趣的文章

Weka中数据挖掘与机器学习系列之基本概念（三）

使用Xshell密钥认证机制远程登录Linux

查看>>

pair的例子

查看>>

uva 387 A Puzzling Problem （回溯)

关于PHP会话：session和cookie

查看>>

C#double转化成字符串保留小数位数, 不以科学计数法的形式出现。

Hbuild在线云ios打包失败，提示BuildConfigure Failed 31013 App Store 图标未找到解决方法...

查看>>

找到树中指定id的所有父节点

查看>>

jQuery on()，live()，trigger()

查看>>