Question

让我们以此为例：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link type="text/css" rel="stylesheet" href="s.css">
    </head>

    <body>
        <div id="container">
            <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>
        </div>
    </body>
</html>

的CSS：

* {
    margin:0px;
    padding:0px;
}

#container {
    margin:10px;
    width:400px;
    border: 2px solid red;
}

它显示如下：

enter image description here

如何将此类文本始终放在父div中？

Answer 1

您可以使用word-wrap:break-word。

#container {
    margin: 10px;
    width: 400px;
    border: 2px solid red;
    word-wrap: break-word;
}

jsFiddle example

或者，您也可以使用overflow:hidden，这将隐藏溢出。这假设您不希望文本换行。 jsFiddle example

最后，有overflow:scroll允许您滚动溢出。注意 - 无论文本的长度如何，始终都会有滚动条。为避免这种情况，您还可以使用overflow:auto。我不知道你想要什么。 overflow:scroll

的jsFiddle example

Answer 2

警告：可能您希望的行为是JoshC的回答，但我的回答也是将文字保留在父母内部（以另一种方式）。

使用与visible不同的overflow（即auto，scroll或hidden）。

在大多数情况下，我建议auto：

#container {
    margin:10px;
    width:400px;
    border: 2px solid red;
    overflow: auto;
}

Demo

Answer 3

您有一个文本字符串，在现实世界中通常不存在，其中字符/字母图像的总宽度超过父元素的设置宽度。

万一发生这种情况，您可以使用word-wrap: break-word;

带有正常文字的

JSFiddle。

Answer 4

你不太可能有一个单词或字符串如此长，没有任何空格。请重新考虑实际内容的长度。使用overflow:hidden您只会隐藏容器外的额外文本，我认为这是您不想要的。如果你真的需要一个长得多（甚至更长）的单词，那么你需要使用word-wrap:break-word或word-break:break-word。您仍然可以阅读以下帖子以供进一步参考。

how to use automatic css hyphens with word-break: break-all?

How to break long words in a table td?

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

如何在父级内部保留文本？

4 个答案: