如何确定文本区域中的文本是否换行到多行？

Question

如何确定文本框中的长文本是否被分成了两行或更多行？

我不是在谈论像这里讨论的新行字符。

我知道有一个插件Textarea Line Count

有没有更简单的方法？

- Mithun Sreedharan

---

就使用方便性而言，我认为你不可能找到比你提供的插件更简单的解决方案了。由于文本区域的换行是基于其大小的，所以你几乎肯定需要根据文本区域的宽度和字体的宽度计算一行可以包含的最大字符数，然后进行某种计算。非等宽字体会进一步增加复杂性。你认为有什么比Textarea Line Count插件更简单的解决方案吗？ - crush

我考虑创建一个具有相同样式的临时div，并测量其高度，但由于浏览器差异，这并不精确。不确定是否值得麻烦。更多细节请参见：https://dev59.com/K3A65IYBdhLWcg3wqQg8#3697221 - Matt Coughlin

Answer 1

我进行了实验，并想出了一个涉及以下内容的技巧：

1. 禁用textarea中的文本换行（并禁用填充）

2. 检查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;
}

- techfoobar