做的烂的网站,十大免费客户管理系统,网站内容建设平面设计,网站建设贴吧目录 需求代码代码解释 需求
最近写一个项目#xff0c;遇到了一个问题#xff0c;就是希望实现下面这种文字效果#xff1a;文字在一行排#xff0c;超出的部分用省略号代替
代码
!DOCTYPE html
html langenheadmeta charset… 目录 需求代码代码解释 需求
最近写一个项目遇到了一个问题就是希望实现下面这种文字效果文字在一行排超出的部分用省略号代替
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 100px;height: 100px;background-color: skyblue;/*下面这三行是实现省略号效果的核心代码*/text-overflow: ellipsis; white-space: nowrap;overflow: hidden;}/style
/headbodydiv classbox今天的天气非常棒你要出去玩吗/div
/body/html代码解释
text-overflow: ellipsis;
作用 这个属性用来设置当文本溢出一个块级元素的内容盒子时如何显示。ellipsis 值表示用省略号…来表示文本的溢出部分。效果 如果 .box 类所指定的元素中的文本超出了元素的显示范围那么超出的部分将被省略号替代。
white-space: nowrap;
作用 这个属性控制元素内的空白字符的处理方式以及文本换行的行为。nowrap 值表示文本不会换行而是在一行内连续显示。效果 即使.box 类的元素宽度不足以显示全部文本文本也不会换行而是尽可能地在一行内显示。
overflow: hidden;
作用 这个属性用来设置当元素的内容溢出元素盒子时如何处理溢出的内容。hidden 值表示溢出的内容将被裁剪并且不显示滚动条。效果 如果 .box 类的元素中的文本超出了元素的显示范围那么超出的部分将不会显示也不会出现滚动条。
