CSS省略字符串开头

上的 
当CSS文本溢出:省略号(与固定宽度溢出:隐藏引入了CSS规范和浏览器;该特性使我们不再试图将JavaScript宽度计算与字符串宽度计算和截断结合起来。CSS省略号对可访问性也非常友好。CSS文本溢出:省略号这个特性很棒,但本质上是为了只在末尾省略字符串;如果我们想省略屏幕的开头怎么办?这个用例相当合理:考虑显示一个文件路径——很多时候,一组文件的目录是相同的,在这种情况下,您应该显示字符串的末尾,而不是开头。让我给你展示一个在乞求字符串时省略的技巧!

CSS

在字符串的前面显示省略号与在末尾显示省略号基本相同,只有一个简单的技巧:
.省略号-左{/*标准CSS省略号*/白色空间:诺雷普;溢出:隐藏;text-overflow:省略号;宽度:200px;/*字符串开头*/方向:rtl;文本对齐:左;}
要在字符串开头添加省略号,请使用RTL和and水平对齐剪掉绳子的开头!正在播放的RTL水平对齐是一种在元素或字符串开头获得CSS省略号所需效果的天才方法。CSS规范实现一个更强大的省略号系统将是一件好事,但目前,我崇拜这样令人惊叹的CSS技巧!

最近的功能

  • 其他人的正则表达式

    迟早你会遇到一个正则表达式。由于语法晦涩难懂,文档混乱,学习曲线庞大,大多数开发人员都习惯于从StackOverflow中复制和粘贴它们,并希望它们能正常工作。但如果你能解码正则表达式并利用它们的威力,该怎么办呢?在。。。

  • 6件事你做了’不了解Firefox OS

    火狐操作系统到处都是技术新闻,理由很充分:Mozilla终于为web开发人员提供了所需的平台,他们可以用多年来一直在创建的方式来创建应用程序——使用CSS、HTML和JavaScript。Firefox OS一直在快速改进。。。

令人难以置信的演示

  • 使用PHP将照片上传到Flickr

    多亏了Instagram,我有点痴迷于将照片上传到不同的服务。Instagram的iPhone应用程序允许我拍照并快速过滤;照片修补完成后,我可以将照片上传到Instagram、Twitter、Facebook和。。。

  • 使用MooTools的Digg-Style动态共享小工具

    我一直认为Digg是一个非常进步的网站。Digg使用实验性的、经过调整的方法进行评论和任务关键函数。Digg给他们的网站添加了一个不错的点子,那就是他们的悬停共享小部件。以下是如何在您的站点上实现该功能。。。

讨论

  1. CSS规范似乎建议不要使用方向网页上的属性:

    https://drafts.csswg.org/css-writing-modes-3/#方向

  2. 牦牛613

    http://jsfiddle.net/yak613/fhr2s10c/

    这似乎有点奇怪。额外的斜线是从哪里来的?

  3. Boon公司

    对于Safari来说,这个技巧似乎被打破了,它仍然从后面截断,然后在前面附加省略号。
    铬/FF:12345=>…345
    野生动物园:12345=>…123

  4. 乔恩·沃尔斯滕

    对于任何对符号(如国际电话号码中的加号)有疑问的人,请添加以下内容:
    unicode-bidi:明文;

  5. 如果有人处理要截断的多行字符串,我建议使用cuttr.js(https://github.com/d-e-v-s-k/cuttr-js)库;)

  6. 为了防止其他人遇到这种情况……我有一个问题,如果文本中包含标点符号,请添加

    方向:rtl

    将标点符号移动到文本开头。我通过在字符串末尾附加unicode字符和:after来解决这个问题

    .省略号-左{/*标准CSS省略号*/白色空间:诺雷普;溢出:隐藏;text-overflow:省略号;宽度:200px;/*字符串开头*/方向:rtl;文本对齐:左;}.ellipsize-left:后面{内容:“\200E”}

将代码打包<pre class=“{language}”>标签,链接到GitHub要点、JSFiddle提琴或CodePen笔进行嵌入!