CSS高级技巧:自动省略左侧文本
source link: https://renfufei.blog.csdn.net/article/details/85159967
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
难以置信! 浏览器和CSS规范居然支持自动省略左侧的文本了。 通过 text-overflow: ellipsis, 搭配固定的 width 属性, 以及overflow: hidden 样式, 就可以实现这样的功能; 能用CSS实现，就不需要编写复杂的 JavaScript 代码来计算字符串宽度, 或者进行截断了. CSS的自动省略特性, 对无障碍环境也非常友好。
text-overflow: ellipsis 特性是很强大, 但其本身只能省略右侧文本;
如果想省略左边的文本怎么办呢?
这种需求还是很常见的: 比如, 有很多个文件路径, 其中有许多文件的目录是一模一样的, 这时候只显示最右侧的文本, 明显会比较合理。
下面介绍一个小技巧, 让自动省略出现在左边!
CSS样式
自动省略左侧文本, 和自动省略右侧文本的样式基本一致, 只是多了一点小技巧:
.ellipsize-left {
/* 常规的CSS省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
/* 让省略符显示在文本左侧 */
direction: rtl;
text-align: left;
}
我们需要指定text-align 样式, 并指定方向为RTL, 来自动裁剪左侧文本!
RTL, right to left, 从右到左;
LTR, left to right, 从左到右;
参考: https://developer.mozilla.org/en-US/docs/Web/CSS/direction
使用text-align和RTL来实现自动省略左侧文本的CSS特效, 是一个非常精巧的设计; 也许未来会很普及, 但现在这个技巧还很高端, 会的人不多!
在线Demo
在线Demo页面的地址为: https://davidwalsh.name/demo/css-left-ellipsis.php
从中可以看到,
相关的CSS代码如下:
<style type="text/css">
.ellipsize-me {
white-space: nowrap;
/* 很显然,overflow的值不能是: visible */
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
width: 200px;
border: 1px solid #999;
padding: 10px;
}
</style>
HTML代码如下:
<p class="ellipsize-me">
first > second > third<br>
second > third > fourth > fifth > sixth<br>
fifth > sixth > seventh > eighth > ninth
</p>
显示效果类似这样:
first > second > third
...ourth > fifth > sixth
...nth > eighth > ninth
其中的省略符(...)是不可选择的。
效果截图:
这里其实也演示了CSDN博客新出的一个小功能, MarkDown编辑器中让图片居中。
只需要在图片路径后面, 加上hash #pic_center 即可。例如:
你可以查看上面居中图片的URL。
原文链接: https://davidwalsh.name/css-ellipsis-left
Demo地址: https://davidwalsh.name/demo/css-left-ellipsis.php
翻译人员: 铁锚 - https://blog.csdn.net/renfufei
翻译日期: 2018年12月21日
Recommend
-
136
使用技巧会让人变的越来越懒，没错，...
-
24
在Go语言中，变量可以声明之后再赋值，也可以不声明，直接就用。 var strM string strM = "Hello Golang" strN := "Hello Golang" 我刚开始的时候有点困惑，一把锁为什么要配两把钥匙，使用一种方法不就香吗？...
-
11
使用 CSS 实现多行省略漂洋过海来看你IT俱乐部-码出人生使用 CSS 实现多行省略Dec 17, 2020CSS6
-
7
修改 org-mode 的省略符号 org-mode 默认使用三个点 (...)来只待隐藏内容。不过我们可以通过修改 org-ellipsis 的值来修改这个表示方式 org-ellipsis is a variable defined in ‘org.el’. Its value is nil This variable...
-
6
Switch中省略了break语句及缺少default导致的代码缺陷 什么是Switch中省略了break语句导致的代码缺陷? break语句通常用在循环语句和switch语句中。当break用于switch语句中时，可使程...
-
10
Go泛型系列：再简化，省略接口 这是Go泛型系列文章。 其它Go泛型文章： 如果你一直关注Go泛型的设计和实现，一定知道Go泛型代码实现是通过类型参数(type parameter)实现的...
-
9
Visual Studio：优化了复制/移动省略 作者：漫漫开发路 2022-10-26 11:00:06 当 C++ 函数中的 return 关键字后跟非内置类型的表达式时，执行该 return 语句会将表达式的结果复制到调用函数的返回槽(Return Slot)中...
-
7
在业务中，有这么一种场景，表格下的某一列 ID 值，文本超长了，正常而言会是这样：
-
4
今天在移动端开发的时候，遇到一个块级文本省略ios手机无效的问题，这种问题形成的原因是什么呢？chrome里面是正常的，为啥ios里面不行？解决方案又是什么呢？ 文本省略回顾 我很早很早之前的文章介绍了文本省略的方式，其中有一行和多行，请看：
-
3
EPLAN2022技巧篇-文本自动换行 14小时前 作者：工控PLC布道师
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK