html - 如何将文本保留在父级中？

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

它显示如下：

在此处输入图像描述

我该怎么做才能将这种文本始终放在父 div 中？

score 13 · Accepted Answer

你可以使用word-wrap:break-word.

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

jsFiddle 示例

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

最后，overflow:scroll它可以让您滚动浏览溢出。注意 - 无论文本的长度如何，总会有一个滚动条。为避免这种情况，您还可以使用overflow:auto. 我不知道你想要什么。jsFiddle的例子overflow:scroll

score 0 · Accepted Answer

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

如何使用自动css连字符和分词：break-all？

如何打破表格td中的长词？

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

score 0 · Accepted Answer

警告：您想要的行为可能是 JoshC 的回答，但我的回答也将文本保留在父级中（以另一种方式）。

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

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

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

演示

score 0 · Accepted Answer

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

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

JSFiddle与普通文本。

html - 如何将文本保留在父级中？

4 回答 4

Related

Reference