CSS样式-文字标题过长的处理
一、white-space: nowrap;强制不折行，除非遇到<br>标签
没使用之前的效果：
<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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>
效果：
浙公网安备 33010602011771号