Html 在文本换行时增加容器宽度（而不是高度）

我需要一些关于如何控制文本换行对其父div宽度的影响的提示。我相信这是件容易的事，我只是不明白。我已经在网上搜索了几天，但仍然没有找到任何有用的东西

好的，假设我有以下简单的代码：

HTML

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

虽然我的任务是有一个固定的高度（不超过某个值，比方说由max height管理），但却使.text包装器的宽度增加

请让我知道是否有任何好的CSS解决方案？否则我需要深入研究JS

供你参考-

Thanx伙计们

这里有一个使用

calc（）的例子

CSS

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

---

您可以使用以下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"});
});

var oWidth=$（窗口）.width（）；
var textWrapperWidth=$（“.text wrapper”）.width（）；
$（窗口）。调整大小（函数（）{
if（$（window.width（）$（window.width（））//如果窗的宽度太小，则在这种情况下增加高度
$（“.text wrapper”）.css（{“宽度”：“50%”，“高度”：200+diff+“px”}）；
其他的
$（“.text wrapper”）.css（{“宽度”：“90%”，“高度”：“200px”}）；
}
其他的
$（“.text wrapper”）.css（{“宽度”：“50%”，“高度”：“200px”}）；
});

我想，OP希望保持高度固定，并增加

文本包装的宽度。

。。！嗨，thanx，很快就好了。对不起，我没有提到这一点-我需要文本完全可见，所以没有滚动，只需调整父容器（文本包装器）的宽度，以适应文本。

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

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"});
});