javascript - 使用 JavaScript 将多行内联元素分解为不同的元素

Question

我正在尝试实现视觉外观，如 http://screencast.com/t/bbziM2OGe8 所示如您所见，应用于元素的颜色应仅应用于文本，而不是其整个容器。这些元素是内联的，但由于它们有多行，因此背景将应用于与最长行宽度相同的可视 block 。

文本是动态的，所以我不能将它分成单独的内联元素，因此最后一行是单行内联元素。

我正在寻找一个 JavaScript 解决方案，它可以获取文本指标并将动态内容分解为单独的元素，例如跨度，换行，比如获取总高度、行高、计算行数、以某种方式将文本拆分为该行数并创建元素。我最不确定的部分是如何获取每行显示的单词。

无论如何，即使没有这样的脚本，也请告诉我您的想法和建议，我会尝试自己创建脚本。

感谢您的帮助。

Answer 1

如果给定一个文本格式的长字符串，其中每个字母的宽度都相同，那么正确地将文本分成不同行的问题就很简单了。假设字体宽度取决于所显示的字符，我建议编写一个脚本，遍历您愿意处理的所有可打印字符并计算该字符的宽度。然后将这些数据保存为一个可以像这样调用的对象:

charLen[character] = length

然后按照以下的思路写一些东西

breakText = function(str) {
    var lines = [], maxSize = $('#element').width();

    while( str !== '') { 
        var len = 0, lineText = '';

        while( len <= maxSize ) {
            len += charLen[str.charAt(0)];
            lineText += str.charAt(0);
            str = str.substr(1);
        }

        lines.push(lineText);

    }

    return lines;
}