文字溢出隐藏并显示省略号--CSS省略号

单行文本文字超出隐藏并显示省略号：

.box {white-space: nowrap;text-overflow:ellipsis;overflow:hidden;
}

多行文本(展示2行)文字超出隐藏并显示省略号：

.box {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}

如果使用SCSS 或Less

/**CSS省略号-- 默认一行，可根据传递的参数设置展示几行参数: {Param} Number用例--超出两行使用省略号: @include ellipsis(2);
*/
@mixin ellipsis($lineClamp: 1) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: $lineClamp;line-clamp: $lineClamp;-webkit-box-orient: vertical;
}

文字溢出隐藏并显示省略号--CSS省略号相关推荐

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号
CSS 如何实现文字溢出隐藏时,隐藏左边或者右边,并显示省略号指定一个定宽高的盒子,当文字溢出,会换行显示出来. .box {width: 60px;height: 30px;background- ...
单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
css 文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代让文字只显示一行,超出显示省略号 overflow: hidden; // 溢出部分隐藏 whi ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...
css文字溢出隐藏为三个点
css文字溢出隐藏为三个点- (1)单行 white-space: nowrap;//不换行 text-overflow: ellipsis;//将文本溢出显示为(-) overflow: hidde ...
css实现多行文字溢出隐藏——前端小问题不定时更新
多行文字溢出隐藏,只用一个容器会出现padding部分无法隐藏,出现如下图所示的现象: 解决方法: 内部嵌套一层容器,设置overflow:hidden:即可: 具体代码如下: 转载 ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
CSS多行文本溢出隐藏，显示省略号
单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ell ...
CSS文本溢出隐藏，显示省略号
仅供自己记录,老用还不记得,哈哈哈笨死了!!! 单行文本溢出隐藏: overflow: hidden; 单行文本溢出隐藏显示省略号: white-space: nowrap; overflow: hi ...

文字溢出隐藏并显示省略号--CSS省略号

文字溢出隐藏并显示省略号--CSS省略号相关推荐

最新文章

热门文章