是否可以在左对齐文本中测量最大自动换行宽度？

Question

是否可以在左对齐文本中测量实际的自动换行宽度？

例如，下面说的是左对齐。根据元素宽度，它可以包含在单词“their”或单词“the”。

标记为红色的宽度与元素宽度不一致，因为当单词不适合该行时，包装会发生在随机位置。

可以测量这个宽度吗？

Answer 1

这可能不是您想要的，因为它会修改您的标记，但我使用的技巧是获取您的文本并将每个单词包装在一个范围内。然后我查看每个span标签并确定哪一个是最右边的：

Demo

<强>代码：

标记：

var text  = $('div.test').text();
var words = text.split(' ');
var html  = '';

$.each(words, function(i, word) {
    html += '<span>' + word + '</span> ';
});

$('div.test').html(html);

var farthestRight = 0;
$('div.test span').each(function(i,e) {
    var left = $(e).position().left;
    var width = $(e).width();

    if (left + width > farthestRight) {
        farthestRight = left + width;
    }

    // Uncomment to see debug data
    // $('.results').append('<div>' + left + ', ' + width + ', ' + (left + width) + '</div>');
});

$('.results').append('<div>' + farthestRight + '</div>');

JavaScript with jQuery：

for (int x = 1 ; x < array1.length ; x++){
    int newnode = -1;
    if(array1[x].equals("")) 
        break;
    try{
        newnode = Integer.parseInt(array1[x]);
    }catch(NumberFormatException e){
        System.err.println("err");
    }
    //searching in matrix
    // do other stuff
}

Answer 2

您可以临时创建span并用文字填写，一个接一个，并检查每次宽度是否实际增加。一旦它不再增加，就必须发生换行，所以只需将之前的宽度与全宽度进行比较。

完成后，重新插入原始数据。

<div>This is a long text that wraps somewhere, but we don't know where exactly...
</div>
<h2 id="result"></h2>

var text = $('div').text();
$('div').empty().append($('<span>'));
var words = text.split(' ');
var lastWidth = 0;
for (var word in words) {
    if (words[word] == '') continue;
    var newWidth = $('div span').append(words[word] + ' ').width();
    if (!(newWidth > lastWidth)) {
        $('#result').text($('div span').text(text).width()).append('px');
        break;
    }
    lastWidth = newWidth;
}
$('div').text(text);

JSFiddle

Answer 3

您可以在文本节点中创建Range时查询文本宽度（以及更多），并使用getBoundingClientRect()读取其尺寸。

function getTextRect( containerNode ) {
  // For simplicity, we assume plain text here
  // (no nested markup)
  var textRect,
      textNode = containerNode.childNodes[0],
      textRange = document.createRange();

  textRange.selectNode( textNode );
  textRect = textRange.getBoundingClientRect();

  // Clean up
  textRange.detach();

  return textRect;
}

// You can read the width with getTextRect( someNode ).width

您可以在this JSBin demo中看到它。

这种方法在IE9 +中得到很好的支持（在IE8中不起作用）; Chrome，FF，Opera已经support it for ages。但是，MDN没有Safari的兼容性信息。所以我在iOS8，iOS9以及桌面上的Safari 9中简要检查了一下这个演示 - 就像一个魅力。