Question

考虑一下这个html / css片段：

.l { text-align: left; }
.r { text-align: right; }

p { 
  width: 150px; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  border: solid 1px green; 
}

<p class="l">111222333444555666777888999</p> 
<p class="r">111222333444555666777888999</p>

它显示了两个固定宽度的容器，其中一些文本太长而无法容纳，溢出设置为显示省略号以显示某些文本被隐藏。第一个容器左对齐，第二个容器右对齐。

结果显示两个示例的省略号都在右侧。

然而，对于第二个合适的人，我想实现这个目标：

...4555666777888999

而不是

1112223334445556...

这可能吗？

Answer 1

您可以使用css direction属性direction: rtl：

从右到左设置文本方向

＆＃13;

.l {
  text-align: left;
  direction: rtl;
}
.r {
  text-align: right;
}
p {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: solid 1px green;
}

＆＃13;

<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>

＆＃13;

<强>方向

设置CSS属性的方向以匹配文本的方向：rtl   对于从右到左（如希伯来语或阿拉伯语）文本编写的语言   和其他脚本的ltr。这通常作为一部分完成   文档（例如，使用HTML中的dir属性）而不是通过   直接使用CSS。

<强>参考

MDN direction

Answer 2

要获得此效果，您必须使用一点点黑客。请参阅以下示例：

＆＃13;

p {
  border:1px solid #000;
  width:150px;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reverse-ellipsis {
  text-overflow: clip;
  position: relative;
  background-color: white;
}
.reverse-ellipsis:before {
  content: '\02026';
  position: absolute;
  z-index: 1;
  left: -1em;
  background-color: inherit;
  padding-left: 1em;
  margin-left: 0.5em;
}

.reverse-ellipsis span {
  min-width: 100%;
  position: relative;
  display: inline-block;
  float: right;
  overflow: visible;
  background-color: inherit;
  text-indent: 0.5em;
}
.reverse-ellipsis span:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: inherit;
  z-index: 200;
  left: -.5em;
}

＆＃13;

<p class="ellipsis reverse-ellipsis">
  <span>111222333444555666777888999</span>
</p>
<p class="ellipsis">111222333444555666777888999</p>

＆＃13;

有关此内容的更多信息，请访问：http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/

文本溢出，左侧有省略号

2 个答案: