前言
积累一下css代码，关于html中文本过多，不想全部展示，多余部分被省略号替代
内容
关于table中td中文本超过td大小设置省略值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
table{
table-layout: fixed;/*内部线条固定*/
width: 255px;
}
td{
white-space: nowrap; /*规定段落中的文本不进行换行*/
overflow: hidden;/*关闭滚动条*/
text-overflow: ellipsis; /*溢出的字体省略号*/
}
</style>
<body>
<!--<a href="#" title="我是你的郝鹏有">我是你的好朋友</a>-->
<table border="1" style="border-spacing:1px ;border-collapse:collapse;" >
<tr>
<td>
我是你的好朋友我是你的好朋友我是你的好朋友我是你的
</td><td>
2018-04-18
</td>
</tr>
<tr>
<td>这是关于一个好朋友的故事，你知道我讲的是什么吗</td>
<td>2018-04-18</td>
</tr>
</table>
</body>
</html>
展示效果
设置一个table中td文本过长设置省略值，必须
一.table的属性table-layout=fixed
二.设置一个table的宽度
三.white-space=nowrap代表文本不能换行
介绍一下white-space的值
1.pre 表示会保留文本中的空白部分
<html>
<head>
<style type="text/css">
p
{
white-space: pre
}
</style>
</head>
<body>
<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
</body>
</html>
2.normal 代表文本超过了框框的大小才会换行
<html>
<head>
<style type="text/css">
p
{
white-space: pre
}
</style>
</head>
<body>
<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
</body>
</html>
四.overflow: hidden 代表关闭滚动条
五.text-overflow代表多余的文本如何解决
1.clip 多余的部分会被修剪
2.ellipsis 代表多余的文本会被省略号代替
div 包含无法在框中容纳的长文本处理
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">这是一个非常遥远的故事，我要好好给你讲讲</div>
</body>
</html>
结语
不积跬步无以至千里，积累。。。。。。。。