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

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

image.png

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;
}

效果预览

image.png

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

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。