direction: rtl + ellipsis的不正常表现(好家伙!)

449 阅读1分钟

前情提要

显而易见如果想让一行文字自动省略,设置三个css属性就行

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

但是如果末尾的字更重要,我想要开头省略呢?

法子来了

设置direction: rtl; 然后你会发现,好家伙,感叹号被吃了

why

stackoverrun.com/cn/q/568087…

  • 简单点说,我们输入一句话,由于语序是从左到右,所以结束以后标点在末尾,那书写方向换为从右到左以后,末尾在左边,所以末尾的标签也就挪到了左边
  • 比如“我吃饱了。” -> “。了饱吃我”

solution

文字末尾加入‎

zh.wikipedia.org/wiki/%E5%B7…

作为一种排版符号,强行指定好了方向,标点自然也就不会动了

完事