限制格式化用户输入的宽度 - Javascript、CSS 或 jQuery答案

【问题标题】：Limit width of formatted user input - Javascript, CSS or jQuery限制格式化用户输入的宽度 - Javascript、CSS 或 jQuery
【发布时间】：2010-08-31 09:58:46
【问题描述】：

如何防止格式化的用户输入超过最大宽度？（例如，800 像素）用户输入被格式化，因为它被输入到所见即所得的文本编辑器（CK 编辑器）中。

此解决方案不起作用：

// Replicate user input in hidden div  
// Check width  
// If width > 800px, remove characters

...因为您将从格式化条目中删除字符 - 例如，从 <p>Hello World</p> 您最终会得到 <p>Hello World</p

【问题讨论】：

请记住，编辑器的浏览器可能有不同的设置/字体/等。比查看器的浏览器更晚，这样文本在查看器浏览器中的宽度将超过 800px。

标签： javascript jquery css textarea user-input

【解决方案1】：

我已经可以找到宽度格式化的字符串。问题出在它的实际缩短。

我认为考虑到您的问题，可以从格式化条目中删除最后一个字符。您只需要递归地挖掘您的 HTML 结构，直到找到它。看看我写的这个简洁的小函数：

function findLastElement(element){
    var content = $.trim(element.html());

    if(content.charAt(content.length - 1) === '>'){
        var lastChild = element.children(':last');
        if(lastChild.length > 0){
          return findLastElement(lastChild);
        }
    }

    return element;
}

这个名字有点误导，但是这个函数会挖掘你传递给它的jQuery元素来找到包含最后一个字符的元素，所以我认为这会解决你的问题。

附言。我很乐意接受有关如何使用这段代码优化/采用最佳实践的任何建议，如果这里的任何大师愿意在 cmets 中删除一个。

【讨论】：

【解决方案2】：

我们可以假设只使用某种字体吗？这可能会有所帮助：

Calculate text width with JavaScript

【讨论】：

很遗憾没有。但我已经可以找到格式化字符串的宽度。问题在于它的实际缩短。