Question

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

该文本是动态的，因此我无法将其分解为单独的内联元素，因此最后一行是单行内联元素。

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

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

感谢您的帮助。

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;
}

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

1 个答案: