Question

我有一个绝对定位的div，里面有文字，但它溢出了宽度的边缘。如果我使用溢出：隐藏，则溢出消失。但是，我希望文本在高度范围内包裹多行。

我在这里遗漏了什么吗？感谢。

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
height: 50px;
}

Answer 1

@lorenz;在你的评论中，afshin在你的div中包含你必须使用word-wrap属性的单词例如

#absolute_div

    {
        background-color: #8cc63f;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        width: 44px;
        min-height: 50px;
        overflow:hidden;
        word-wrap:break-word;
    }

检查此http://jsfiddle.net/aE8cg/

Answer 2

我用@ alex的jsfiddle例子来分析（进一步）他正在制作的观点。

文本IS包装;但是，你已经设定了一个高度。刚性高度将使div不会扩展，这是我想要的。包装和填充空间的文本数量将取决于您的line-height，font-size以及您可能已应用于容器内容的任何其他CSS。

在我分叉的小提琴中，我设置了font-size:10px; line-height:1 - 获得了5个文本包装线，其余内容被您在声明中设置的高度/宽度参数隐藏。

http://jsfiddle.net/Kbzga/

word-wrap，white-space，overflow:visible可能不是您所追求的，除非您不介意带有文本溢出的44x50绿色框或滚动条。 HTH

Answer 3

不完全确定你想做什么，但overflow:auto可能就是你想要的。

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 144px;
height: 50px;
overflow:auto;    
}

http://jsfiddle.net/jasongennaro/Vqukv/

Answer 4

当你使用绝对定位，并设置高度和宽度时，内容对盒子本身没有影响，所以你只需设置一个最小高度：50px，它将随着文本的增长而增长，如下所示这jsFiddle。

Answer 5

我有一段时间遇到这样的问题。

我有一个界面，用户输入少量的HTML，然后在旁边显示它以显示它的样子。

我的问题是我一直在将用户输入的所有空格转换为 ，我想这样做，以便输入空格来格式化文本;添加缩进等。

然而，效果是它溢出而不是将文本包装在div中。一个简单的解决方法是将两个空格转换为  ，并留下单个空格。

我意识到这可能与其他人的原因不一样，但我希望它对某人有所帮助！

Answer 6

这对我有用......

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;

在绝对定位的div内部进行文本换行

6 个答案: