Question

我需要提示如何控制文本换行对其父div宽度的影响。我确定它很容易，我只是看不到。我已经进行了几天的互联网搜索，但仍然没有找到任何帮助。

好的，让我们说我有以下简单的代码：

HTML

    <div class="text-wrapper">
        <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu erat vitae justo finibus consequat. Sed quis mauris sed massa congue consequat. Phasellus vitae mattis odio, nec accumsan dolor. Phasellus est massa, semper ac elementum quis, accumsan a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis quis mauris ac libero sagittis venenatis ut id diam. Suspendisse vulputate diam mi, eget iaculis diam venenatis in. Aenean erat augue, maximus et tellus a, convallis ornare justo. Sed ultricies sollicitudin urna ac blandit.

         </p>

    </div>


</div>

CSS

html, body, 
.wrapper {
    width:100%;
}

.text-wrapper {

    width:50%;
    border:1px solid red;
    margin:0 auto;
    padding:10px;

}

当我调整浏览器宽度时，.text-wrapper p中的文本开始换行，增加.text-wrapper height。

虽然我的任务是拥有一个固定的高度（不超过某个值，让我们说由max-height管理），而是让.text-wrapper在宽度上增长。

请告诉我是否有任何好的CSS解决方案？或者我需要深入研究JS。

提供参考 - https://jsfiddle.net/Lhrwcze9/

Thanx家伙

Answer 1

以下是使用calc()

的demo

<强> CSS

.text-wrapper {
    max-width: calc(960px - 50%);
    border:1px solid red;
    margin:0 auto;
    padding:10px;
}

Answer 2

您可以使用此jquery代码调整框大小：

var oWidth=$(window).width();
var textWrapperWidth=$(".text-wrapper").width();
$( window ).resize(function() {
    if($(window).width()<oWidth)
    {
        diff=oWidth-$(window).width();
        if(diff>$(window).width()) //if width of window is too small increase height in that case
            $(".text-wrapper").css({"width":"50%","height":200+diff+"px"});
        else
            $(".text-wrapper").css({"width":"90%","height":"200px"});
    }
    else
        $(".text-wrapper").css({"width":"50%","height":"200px"});
});

在文本换行内增长容器宽度（不是高度）

2 个答案: