Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - How to keep text inside the parent?

Lets say take this as an example:

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

And it displays like so:

enter image description here

What do I do to place this kind of texts always within the parent div?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You could use word-wrap:break-word.

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

jsFiddle example

Alternatively, you could also use overflow:hidden, which will hide the overflow. This is assuming you don't want the text to wrap. jsFiddle example

Lastly, there is overflow:scroll which will allow you to scroll through the overflow. Note - there will always be a scrollbar regardless of the length of the text. To avoid this you could also use overflow:auto. I don't know what you want. jsFiddle example of overflow:scroll


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...