实现文本一行超出隐藏显示以及强制长单词换行

文本一行超出隐藏显示

就是当你的文本字数过多超出容器的时候，让你超出部分隐藏，并在尾部显示省略号

首先写一个p标签，然后给他写一个较长的文本

<p>这是有段很长很长很长很长很长很长很长很长很长很长很长很长的文本</p>

给p标签写一个200px宽度和灰色背景颜色

p{
    width: 200px;
    background-color: #ccc;
}

效果

现在我们看到p标签会自动换行
接下来让文本强制一行显示

p{
    width: 200px;
    background-color: #ccc;
    white-space: nowrap;/*强制一行显示*/
}

效果

现在文本已经一行显示了，并且文本超出了p标签
接下来让超出部分隐藏

p{
    width: 200px;
    background-color: #ccc;
    white-space: nowrap;/*强制一行显示*/
    overflow:hidden;/*超出部分隐藏*/
}

效果

现在超出p标签部分已经隐藏了
接下来只要让最后显示省略号表示文本未完全显示就OK了

p{
    width: 200px;
    background-color: #ccc;
    white-space: nowrap;/*强制一行显示*/
    overflow:hidden;/*超出部分隐藏*/
    text-overflow: ellipsis;/*最后添加省略号*/
}

最终效果

white-space属性：

可选值	说明
normal	默认值,文本自动换行,空格和换行符会被忽略
pre	类似<pre>标签作用，空白或换行都会被保留
nowrap	强制一行显示
pre-wrap	保留空白和换行符，但是正常地进行换行，也就是当你同一行中到达容器边界时，还是会自动换行，但是html中的空格和换行符都会被保留
pre-line	合并空白符序列，但是保留换行符

text-overflow属性：

可选值	说明
clip	默认值，隐藏文字时不会有省略号结尾
break-word	隐藏文字时省略号结尾

长单词强制换行

现在写一个p标签，里面写一个连续的字母

<p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>

给p标签写一个200px宽度和灰色背景颜色

p{
    width: 200px;
    background-color: #ccc;
}

效果

现在我们的文本被识别为一个长单词，所以不会自动换行
接下来只用给p标签一个word-wrap:break-word;就可以自动换行

p{
    width: 200px;
    background-color: #ccc;
    word-wrap:break-word;
}

效果

word-wrap属性：

可选值	说明
normal	normal为默认值，只在允许的断字点换行。就是只能在单词与单词之间或汉字与汉字之间换行
break-word	运行对长单词或较长的联系字母(例如URL)进行端词从而换行