Question

我有一个可调整大小的div，其中包含text/sentences。当我resize div时，文字会自动换行到fit中可用空间内的container div。

现在我需要通过text php将此(gd library)转换为图片，但由于php-gd无法直接处理多行文字，我需要以某种方式告诉它文本包装的确切位置和新行开始，但我不知道如何在javascript或php中执行此操作。

此外font为dynamic，因此我无法使用alphabets的大小来计算所述dimension中可能的字符数。有什么想法吗？

Answer 1

一个小技巧...... 用<span></span>包裹每个字符并计算它们的偏移量。

Fiddle here

代码：

$('#Action').click(function(){
    var orginalText = $('#container').text();
    var characters = orginalText.split('');
    var wrappedText = "";
    for(var i =0; i< characters.length; i++){
        wrappedText += "<span id='wrapped_" + i + "'>" + characters[i] + "</span>";
    }

    $('#container').html(wrappedText);
    var top = 0;
    for(var i =0; i< characters.length; i++){
        var characterTop = $('#wrapped_'+i).offset().top;
        if(characterTop > top){
            console.log("line break at position " + i);
            top = characterTop;
        }
    }
});

Answer 2

您可以尝试使用计算height和计算line-height。两者都可能，例如$('div').innerHeight()或$('div').css('lineHeight')。您可以找出文本拆分的行数，然后使用一些自动换行算法自行添加正确的行结尾。结果可能与浏览器中的结果不完全相同，但您可以接近。

当文本自动换行时，如何在javascript / php中获取换行符

2 个答案: