CSS自动换行_自动换行css

作者：Monodyee | 2024-03-15 15:07:10

踩

自动换行css

1、换行

1）CSS实现TD的自动换行

在做项目时有时会出现文字过多，一行不能完全显示，需要换行显示的要求，现在了解一下下吧^_^。

td元素的nowrap属性表示禁止单元格中的文字换行，但使用时还要注意，nowrap属性的行为与td元素的width属性有关。若未设置td宽度，则nowrap属性可以起作用，但是若设置td宽度，则nowrap不起作用。

在td元素中可以进行如下的代码设置：

<td style="word-break:break-all">

2）<br/>

小换行，与之前的间距大小不变

3）<p></p>

大换行，下上2个段落之间的间距变大。

4）有时设置宽度对连续的英文或数字等无效，需要强制换行，这时就需要用到word-wrap:break-word;或word-wrap:break-all;

当然了，也有文字过多需要显示前部分o(*￣︶￣*)o

2、显示部分文字有2种方法，不过都可以用text-overflow

语法：text-overflow : clip | ellipsis

clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

1）前部分用文字，后部分用省略号text-overflow : ellipsis


<!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" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
*{ padding:0; margin:0} 
a{ text-decoration:none;color:#6699ff} 
ul,li{ list-style:none; text-align:left} 
 
#divcss5{border:1px #ff8000 solid; padding:10px; width:150px; margin-left:10px; margin-top:10px} 
#divcss5 li{width:150px;height:24px;line-height:24px; font-size:12px;color:#6699ff;overflow:hidden;text-overflow:ellipsis; border-bottom:1px #ff8000 dashed;} 
#divcss5 li a:hover{ color:#333} 
</style> 
</head>
 
<body>
<ul id="divcss5"> 
<li><a href="#"><nobr>• nobr显示不完用省略号显示，测试内容</nobr></a></li> 
<li><a href="#"><nobr>• nobr显示不完不用省略号显示，测试内容</nobr></a></li> 
<li><a href="#"><nobr>• nobr能显示完几个字</nobr></a></li> 
<li><a href="#">•没有nobr显示不完用什么显示，测试内容</a></li> 
<li><a href="#">•没有nobr显示不完用什么显示，测试内容</a></li> 
<li><a href="#"><nobr>• 没有nobr能显示完几个字?</nobr></a></li> 
</ul> 
 
</body>
</html>

text-overflow

总结：如果想要隐藏溢出的内容，同时又想让多余的内容以省略号的形式显示，这时就需要用到overflow和text-overflow，与此同时，为避免文字自动换行，增加nobr标签强制内容不换行。即需要用到overlow、text-overflow、nobr。

2）直接截取text-overflow : clip

3、不换行及不换行的方法

如果我们对li元素设置了宽度，其内容达到设置宽度自动会自动换行，但是有时候因为需要不想让其换行，希望其在一行显示。我们可以在对其元素进行CSS设置时，增加white-space:nowrap;

例：有多个超链接，因设置宽度后有的完整的超链接不能在一行展示，我们需要其不换行，这时加上white-space:nowrap;即可实现同一个超链接不被自动分割成两排显示。


<!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" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
.hDiv{ width:180px; line-height:20px;}
.hDiv a{ margin: 0 5px; white-space:nowrap;}
</style> 
</head>
 
<body>
<div class="hDiv">
    <a href="#">我是超链接1</a><a href="#">我是超链接2</a>
    <a href="#">我是超链接3</a><a href="#">我是超链接4</a>
    <a href="#">我是超链接5</a><a href="#">我是超链接6</a>
    <a href="#">我是超链接7</a><a href="#">我是超链接8</a>
</div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/242126