是否可以在html5页面中使底部边框自动调整大小（根据最后一行的文本宽度）？

Question

是否可以在html5页面中使底部边框自动调整大小（根据最后一行的文字宽度）？ （例如，如果有第三行 - 边界应该有一个洞）。

背景图片可能不同。有可能实现这个吗？

Answer 1

也许不是一个完美的解决方案，这不是一个坏主意......从这里继续;）

HTML：

<div class="wrap">
<div class="column side">
</div>
<div class="column content">    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="column side">
</div>
    <div class="clear"></div>    
</div>

CSS：

.clear
{
    clear: both;
}

.wrap
{
    border-top: 3px solid;
    border-left: 3px solid;
    border-right: 3px solid;
    position: relative;
}

.column
{
    float: left;
    line-height: 24px;
    border-bottom: 3px solid;
}

.column.content
{
    width: 90%;
    padding: 0 2%;
}

.column.side
{
    width: 5%;
}

.no_border
{
    border: none;
}

JQuery的：

$(document).ready(function(){
    var contentOuterHeight_start = $('.column.content').outerHeight();
    var contentHeight_start = $('.column.content').height();
    $('.column.side').css('height', contentOuterHeight_start);
    var lineHeight = $('.content').css('line-height').replace('px', '');
    threeRows = lineHeight * 3;
    if (contentHeight_start == threeRows){
        $('.column.content').addClass('no_border');   
    }

    $(window).resize(function(){
        threeRows = lineHeight * 3;
        var contentOuterHeight_resize = $('.column.content').outerHeight();
        var contentHeight_resize = $('.column.content').height();
        $('.column.side').css('height', contentOuterHeight_resize);
        if (contentHeight_resize == threeRows){        
            $('.column.content').addClass('no_border');   
        }
        else {
            $('.column.content').removeClass('no_border');       
        }
    });


});

小提琴：http://jsfiddle.net/g454305r/