如何查找文本区域中的文本是不是换行为多行？

Posted 2023-05-07

【中文标题】如何查找文本区域中的文本是不是换行为多行？

【英文标题】：How to find whether text in a text area is wrapped to multiple lines?如何查找文本区域中的文本是否换行为多行？

【发布时间】：2013-03-27 22:49:36

【问题描述】：

如何确定 textarea 中的长文本是否被换成了两行或多行？

我不是在谈论 here 讨论的新行字符。

我知道插件Textarea Line Count

还有更简单的方法吗？

【问题讨论】：

就使用的简单性而言，我认为您找不到比您链接的插件更简单的解决方案。由于换行是基于 textarea 的大小，您几乎可以肯定必须根据 textarea 的宽度和字体的宽度计算一行可以包含的最大字符数，然后进行某种计算。非等宽字体使这进一步复杂化。您认为比 Textarea Line Count 插件更简单的是什么？

我考虑创建一个具有相同样式的临时 div 并测量其高度，但由于浏览器的差异，这并不准确。不确定这是否值得麻烦。更多详情请见：***.com/a/3697221/1306809

【参考方案1】：

我对此进行了实验，并提出了一个涉及以下内容的 hack：

在 textarea 中禁用文本换行（加上禁用填充）

检查 textarea 的 scrollWidth 是否大于 width。

我使用的基本逻辑是，如果文本跨越多行，这意味着当关闭换行时，我们应该得到一个水平滚动条。

演示：http://jsfiddle.net/fnG3d/

免责声明：下面的代码是 10 分钟的结果，绝对不是生产质量

function checkMulti(id) 
    var ta = $('#'+id), multi = false;

    // disable wrapping, padding and enable horiz scoll
    ta.addClass('nowrap');

    // check if there is anything to be scrolled horizontally (means multi-lines otherwise)
    multi = ( ta[0].scrollWidth > ta.width() );

    // checking done. remove the class.
    ta.removeClass('nowrap');

    alert('Spread over multiple-lines: ' + multi);


/* the nowrap class */
.nowrap 
    overflow-x: scroll;
    white-space: nowrap;
    padding: 0;