首页 » CSS » CSS自动换行

CSS自动换行

原文 http://blog.csdn.net/qq814965130/article/details/79136889

2018-01-24 02:00:10阅读(496)

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>

CSS自动换行

总结:如果想要隐藏溢出的内容,同时又想让多余的内容以省略号的形式显示,这时就需要用到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>


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹