html - 增加容器宽度(不是高度)，在文本换行时

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 高度。

虽然我的任务是有一个固定的高度(不超过某个值，假设由最大高度管理)，而不是让 .text-wrapper 增加宽度。

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

fiddle 供您引用 - https://jsfiddle.net/Lhrwcze9/

谢谢大家

Answer 1

这是一个 demo使用 calc()

CSS

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