限制以span显示的字符

Question

在HTML或CSS中是否存在某种限制跨度显示的字符的方法？我使用显示这些信息框的转发器,我想将字符限制为前20个字符,如果输入有更多,那么只是连接？该框如图所示:

我的代码是:

<span class="claimedRight" maxlength="20">{{ item.provider }}</span>

Answer 1

这是使用文本溢出的示例:

.text {
  display: block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<span class="text">Hello world this is a long sentence</span>

Answer 2

您可以使用 CSS 属性max-width并将其与ch单位一起使用。
并且，因为这是一个<span>，所以使用一个display: inline-block;（或块）。

下面是一个例子：

<span style="
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>

哪些输出：

Lorem ipsum...

<span style="
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>

Answer 3

您可以使用css，ellipsis;但必须overflow:hidden:为该元素提供固定的宽度。

<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
	</span>