文本溢出：省略号在 TextArea 上不起作用

Question

我用来<textarea>显示多行。我想用来"white-space:nowrap" and "text-overflow: ellipsis"限制每一行显示在一行中，末尾带有“...”。下面是我设置的 css 样式，但“省略号”不起作用。

    display: block;
    width:400px;
    height:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

有没有办法为标签做到这一点？

Answer 1

使用white-space:pre（但它只适用于 FF，因为没有其他浏览器允许在文本区域上使用省略号）

.no-wrap {
  display: block;
  width: 400px;
  height: 80px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

<textarea class="no-wrap">
Nulla aliquet gravida nunc sit amet ultrices. Vestibulum ultricies mi eget feugiat aliquet
Curabitur placerat tellus vel pulvinar fringilla. Integer dignissim ut sem eget mollis.
Aliquam ac tortor in nunc dapibus blandit. Aliquam vehicula diam quis sem consequat
</textarea>

如果您在https://developer.mozilla.org/en/docs/Web/CSS/white-space#Values上看到该表，则保留新行但不换行的唯一选项是pre