Textarea 需要省略号而不是自动换行

Posted 2023-05-07

【中文标题】Textarea 需要省略号而不是自动换行

【英文标题】：Textarea needs ellipsis instead of word wrap

【发布时间】：2012-03-29 07:13:04

【问题描述】：

我需要知道是否有任何 CSS Ninja 可以教我如何做到这一点。我已经设置了一个 JSFiddle，其中包含我所看到的示例。

这是一个测试区，里面有两条线。这两行都没有自动换行，但它们都不会像我要求的那样省略。也许这是不可能的。

http://jsfiddle.net/aaronfrost/PjuFB/

【问题讨论】：

我猜 text-overflow 只适用于非替换元素。

检查此页面的兼容性部分reference.sitepoint.com/css/white-space，看起来你不能在 textarea 中完成。

检查这个答案***.com/questions/657795/…，还更新了你的小提琴jsfiddle.net/PjuFB/14在FF中工作不确定其他人

【参考方案1】：

是否必须使用 textarea 本身？ 您可以使用 contenteditable div 和 p 行标签来实现这一目标

<div contenteditable="true">
    <p class="wtf">
        WHAT IS HAPPENING asdfkjas dflkasd jfalskdfj asldkfj asldkf
    </p>
    <p class="wtf">
        SECOND LINE and it also needs to have an ellipsis
    </p>
</div>

View fiddle here

【讨论】：

这种方法的问题是每行的单词，每个p元素都会被截断，而不是单词被推到下一个p，然后在整个包含元素的结尾...