单行文字溢出隐藏显示省略号

1. 让换行的文字强制在一行显示。属性 white-space: nowrap;

2. 溢出的部分隐藏。overflow: hidden；

3. 文字溢出显示用省略号。 text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单行文字溢出隐藏显示省略号</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 单行文字溢出隐藏显示省略号 */.box1 {/* 设置一个盒子 */width: 100px;height: 50px;background-color: aquamarine;/* 文字过多换行显示，现在强行让文字在一行显示 */white-space: nowrap;/* 然后然溢出的部分文字隐藏 */overflow: hidden;/* 文字溢出显示用省略号。  */text-overflow: ellipsis;}</style>
</head><body><div class="box1">溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
</body></html>

单行文字溢出隐藏显示省略号相关推荐

实现一行或多行文字溢出隐藏显示省略号
1.css控制文字只显示一行,超出部分显示省略号例如:1行后省略 <style> p{ width:300px; overflow:hidden; white-space:nowrap; ...
css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...
li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
单行、多行溢出隐藏显示省略号（解决纯数字、纯英文会失效问题）
单行溢出隐藏: width:300px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出隐藏: displa ...
文本CSS多行溢出隐藏显示省略号
处理动态文本超长问题: 如下图,显然不符合美观视觉此时我们可以这样写,文字不换行溢出显示省略号: {white-space: nowrap;text-overflow: ellipsis;overf ...
多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. 1 dis ...
css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...

单行文字溢出隐藏显示省略号

单行文字溢出隐藏显示省略号

单行文字溢出隐藏显示省略号相关推荐

最新文章

热门文章