记录下前端CSS样式表中控制字符长度和显示长度用法

在开发一个简单的网页中，遇到了文本内容过长导致原本居中对齐的网页整体的变形，看着很不舒服，于是抱着学习的态度请教了下前端程序员，使用max-width，overflow，white-space，text-overflow四个CSS样式的属性修改网站后简单写个教程记录下，同时也给需要同学提供一丢丢帮助吧！！

CSS样式解释

max-width: 165px;

设置段落的最大宽度

overflow: hidden;

作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏

white-space: nowrap;

强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

text-overflow: ellipsis;

用省略号来代替超出文本 

CSS样式使用方法

在CSS样式表添加样式，例如添加如下样式参数，然后网页页面调用添加的样式

.style {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

效果预览

OK，教程已结束，记录下以免下次用到，同时也给新手小白一丢丢帮助，喜欢的同学可以去尝试，多折腾，多收获，不怕出错就怕不出错~~~