关于CSS样式中文字标题过长的处理方法
没使用之前的效果：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
li {
list-style: none;
border: 1px solid #f00;
width: 150px;
height: 25px;
line-height: 25px;
}
</style>
</head>
<body>
<ul>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
</ul>
</body>
</html>如下文字加深颜色的显示效果：
任务热污染语文而因
为一日未入而误入额
外有人因为
使用后：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
li {
list-style: none;
border: 1px solid #f00;
width: 150px;
height: 25px;
line-height: 25px;
white-space: nowrap;
}
</style>
</head>
<body>
<ul>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
</ul>
</body>
</html>如下文字加深颜色的显示效果：
任务热污染语文而因 为一日未入而误入额外有人因为
除非遇到br，才会折行，如：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
li {
list-style: none;
border: 1px solid #f00;
width: 150px;
height: 25px;
line-height: 25px;
white-space: nowrap;
}
</style>
</head>
<body>
<ul>
<li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
<!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
</ul>
</body>
</html>如下文字加深颜色的显示效果：
任务热污染语文而因为
一日未入而误入额外有人因为
二：如果希望多出来的部分不展示，则需要用到 overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
li {
list-style: none;
border: 1px solid #f00;
width: 150px;
height: 25px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<ul>
<li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
<!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
</ul>
</body>
</html>如下文字加深颜色的显示效果：
任务热污染语文而因
三、溢出的部分用省略号代替：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
li {
list-style: none;
border: 1px solid #f00;
width: 150px;
height: 25px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
/* 溢出的部分用省略号代替 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
<!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li>
<li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
</ul>
</body>
</html>如下文字加深颜色的显示效果：
任务热污染语文而…