Question

如果我有这么长的文字（例如在表格中）：

<p class='line'>
    <span class='fixed1'>FIXED</span>
    <span class='long_text'>This is my very very very very long text</span>
    <span class='fixed2'>FIXED</span>
</p>

默认情况下，<p>宽度为100％，如果文字长于多行显示的屏幕。相反，我想在一行中只显示最后一个N字母。

这里有一些例子：

屏幕足够大：

FIXED This is my very very very very long text FIXED

屏幕不够大，文字溢出。

FIXED This is my ve... text FIXED

我可以使用以下方法获得类似的东西：

span.long_text {
    overflow: hidden;
    text-overflow: ellipsis;
}

是否有可能获得我描述的效果？怎么样？

Answer 1

您可以使用white-space: nowrap强制它保持一行。

text-overflow: ellipsis将用“＆＃39; ...”替换内容的结尾。发生溢出时但是，span必须是文本溢出才能生效的块，因此将其display属性设置为inline-block或block。

演示：https://jsfiddle.net/1bmdu5xd/

Answer 2

省略号仅适用于单行事物，所以这里没问题。问题在于那些“N字母”。

以下是:after的首发（您必须在某些CSS中使用N个最后一个字母。次优=＆gt; https://codepen.io/PhilippeVay/pen/vWMePJ?editors=0100

.line {
  display: flex;
  border: 1px solid black;
  width: 240px;
}
.line > * {
  white-space: nowrap;
}
.long_text {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  background: yellow;
  padding-right: 2rem;
}
.long_text::after {
  content: "g text";
  position: absolute;
  right: 0;
}

<p class='line'>
    <span class='fixed1'>FIXED</span>
    <span class='long_text'>This is my very very very very long text</span>
    <span class='fixed2'>FIXED</span>
</p>

现在可以在大多数浏览器中使用content: attr(data-last-letters)和<span class='long_text' data-last-letters="g text"> 或background-image: -moz-element(#someId);那copy-paste an element elsewhere只能在Firefox中使用（过去7年：我猜不会很快跨浏览器工作）。

仅显示跨度的第一个字母，三个点和最后一个N字母

2 个答案: