0

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

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

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

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

谢谢您的帮助。

4

1 回答 1

0

如果我们得到一个文本格式的长字符串，其中每个字母具有相同的宽度，那么正确地将文本分成单独的行的问题是微不足道的。假设字体宽度取决于所显示的字符，我建议编写一个脚本来遍历您愿意处理的所有可打印字符并计算该字符的宽度。然后将此数据保存为可以调用的对象，如下所示：

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;
}
于 2012-10-06T16:25:00.473 回答