CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号

指定一个定宽高的盒子，当文字溢出，会换行显示出来。

.box {width: 60px;height: 30px;background-color: #ff000020;
}

当限制文字不换行后，会在一行超出显示出来。

.box {width: 168px;height: 30px;background-color: #ff000020;white-space: nowrap;
}

添加溢出隐藏，则会自动隐藏右侧文字

.box {width: 168px;height: 30px;background-color: #ff000020;white-space: nowrap;overflow: hidden;
}

当有些情况，我们的文字时右对齐，需要当文字多的时候，溢出隐藏左边的文字。
即使添加右对齐 text-alige:center;也没用。
这时候需要用到CSS的 direction属性，设置文本反向。

默认值为 ltr，left to right ，只需要将该值设置为 rtl ，就可以实现当文字溢出隐藏时，隐藏左边。
看效果

.box {width: 168px;height: 30px;background-color: #ff000020;white-space: nowrap;overflow: hidden;direction: rtl;
}

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号相关推荐

CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
html p自动换行超出省略,CSS自动换行、强制不换行、强制断行、超出显示省略号...
CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此 ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
Html中文字过多，单行超出和多行超出显示省略号
单行:  <p class="pl">这个属性定义溢出元素内容区的内容会如何处理.如果值为 hidden,当点击hidden时,滚动机制关 ...
CSS自动换行、强制不换行、强制断行、超出显示省略号
CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的 ...
css多行文字溢出隐藏为三个点(...)
对于单行文本很简单 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 将这三行代码加到css中就ok了,white-spa ...
html 行内超出隐藏,css如何设置文字不换行超出隐藏？
在CSS中可以使用white-space属性配合overflow属性来实现文字不换行,且超出部分隐藏.下面本篇文章就来给大家具体介绍一下,希望对大家有所帮助. white-space属性指定元素内的空 ...
input框内显示文字，输入时隐藏
一般是用单独文字定位到框中间,用js判定点击事件或输入事件是隐藏文字. css中placeholder属性可以快速实现这个功能,用法:在input标签中添加这个属性,然后其属性赋值就是需要看见的文本 ...

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号相关推荐

最新文章

热门文章