在形状内换行[关闭]

Question

有没有办法为菱形文本块创建标记，其中每个新行都与前一个偏移。

我找不到任何解决方案。可能出于这个目的，我需要一些 javascript。

Answer 1

据我所知，目前没有跨浏览器 css 方法可以做到这一点。所以我戴上我的创意帽，为你写了一些东西。

function rhomboit(obj, offset) {
    var invert = false;
    if(offset < 0){
        offset = Math.abs(offset);
        invert = true;
    }
    var line_height = getLineHeight(obj);
    var els = document.querySelectorAll('.rhombus_side');
    for (var i = 0; i < els.length; i++) {
        els[i].parentNode.removeChild(els[i]);
    }
    var new_height = heightWithOffset(obj, offset);
    var total_lines;
    var line_offset;
    while (true) {
        total_lines = Math.ceil(new_height / line_height);
        line_offset = offset / (total_lines);
        var next_height = heightWithOffset(obj, offset + line_offset);
        if (next_height === new_height) break;
        new_height = next_height;
    }
    for (var i = 0; i < total_lines; i++) {
        var left_offset = line_offset * (i + 1);
        var right_offset = offset - left_offset + line_offset;
        if(invert){
            var hold = left_offset;
            left_offset = right_offset;
            right_offset = hold;
        }
        var div = document.createElement('div');
        div.className = 'rhombus_side';
        div.style.width = left_offset + 'px';
        div.style.height = line_height + 'px';
        div.style.float = 'left';
        div.style.clear = 'left';
        //div.style.backgroundColor = 'red';
        obj.insertBefore(div, obj.firstChild);
        div = document.createElement('div');
        div.className = 'rhombus_side';
        div.style.width = right_offset + 'px';
        div.style.height = line_height + 'px';
        div.style.float = 'right';
        div.style.clear = 'right';
        //div.style.backgroundColor = 'blue';
        obj.insertBefore(div, obj.firstChild);
    }
}

function heightWithOffset(obj, offset) {
    var old_padding_left = obj.style.paddingLeft;
    obj.style.paddingLeft = (offset + 1) + 'px';
    var new_height = obj.clientHeight;
    obj.style.paddingLeft = old_padding_left;
    return new_height;
}

function getLineHeight(element) {
    //Thank you : http://stackoverflow.com/a/4515470/482197
    var temp = document.createElement(element.nodeName);
    temp.setAttribute("style", "border:0;margin:0px;padding:0px;font-family:" + element.style.fontFamily + ";font-size:" + element.style.fontSize);
    temp.innerHTML = "test";
    temp = element.parentNode.appendChild(temp);
    var ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);
    return ret;
}
//Below this is just my showing it with positive and negative offsets
var last_offset = 150;
function toggleRhombus(){
    last_offset *= -1;
    rhomboit(document.getElementById('rhombus'), last_offset);
    setTimeout(function(){toggleRhombus()},5000);
}
toggleRhombus();

<div id='rhombus' style='border:1px solid black;text-align:justify'>This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text</div>

小提琴： http://jsfiddle.net/trex005/benjkr05/

• 我不能说它非常高效，但它可以完成工作。
• 偏移量必须以 px 为单位。
• 您可能希望在调整文档大小时再次调用它。

如果您想了解它是如何工作的，请取消注释两条样式行

Answer 2

你应该使用shape-inside, -webkit-shape-inside。

由于不支持我的浏览器，我无法为您提供更多帮助。请记住，这对您的用户来说也可能是个问题。

更多信息请参见 Adob​​e 的 blog post。