本文共 1222 字，大约阅读时间需要 4 分钟。

1、换行

1）

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

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

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

2）<br/>

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

3）<p></p>

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

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

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

语法：text-overflow : clip | ellipsis

clip : 　不显示省略标记（...），而是简单的裁切

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

    
   
 
    
      
       • nobr显示不完用省略号显示，测试内容
      
 
    
      
       • nobr显示不完不用省略号显示，测试内容
      
 
    
      
       • nobr能显示完几个字
      
 
    
•没有nobr显示不完用什么显示，测试内容
 
    
•没有nobr显示不完用什么显示，测试内容
 
    
      
       • 没有nobr能显示完几个字?
      
 
   
 

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

2）直接截取text-overflow : clip

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

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

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

    
   
    
    我是超链接1
    我是超链接2    
    我是超链接3
    我是超链接4    
    我是超链接5
    我是超链接6    
    我是超链接7
    我是超链接8