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，因为没有其他浏览器允许在textarea 上省略号）

.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

Answer 2

我找到的唯一方法是为椭圆显示div，然后在焦点切换到textarea（它们相互重叠）。你可以用纯CSS做点什么：

<TEXTAREA>
<DIV>

DIV应该与pointer-events: none一起坐在最前面（绝对）。

TEXTAREA有opacity: 0。

当:focus隐藏DIV（~兄弟姐妹）并将TEXTAREA不透明度更改为1.您可能会发现:focus-within伪选择器也很方便，具体取决于您的使用案例。

Answer 3

这不适用于表格单元格中的 textarea。我在表格单元格中使用了 oj-textarea，它可以有多行。尝试了下面的代码，无论行数如何，它都会显示列中该单元格的省略号。

        [![<colgroup>
            <col width="100%" />
            <col width="0%" />
        </colgroup>
        <tr>
        <td  class="module overflow"><textarea>hjkkh jam</textarea></td> <td style="width":100px;" class="module overflow">jamunao kjjhj jk \n     hj jh kjhjhj kj kkjhh jhjhjh hjj hkjh jhjh jhkj jh hhjhjhjhjhjhjhjhjkhjk hjhjkhkhkjhkhkhjhjh</td>
        </tr>
    </table>
.module{
margin: 0 0 1em 0;
overflow: hidden;
}
.overflow {
  --max-lines: 2;
  width:100px;
  position: relative;
  max-height: 2.4rem;
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
  white-space: nowrap;
}
.overflow::before {
  position: absolute;
  content: "...";
/*   inset-block-end: 0;
  inset-inline-end: 0; */
  bottom: 0;
  right: 0;
}
.overflow::after {
  content: "";
  position: absolute;
/*   inset-inline-end: 0; */

  width: 1rem;
  height: 1rem;
  background: white;
}

text-overflow：省略号在TextArea上不起作用

3 个答案: