Geek Answers Handbook

How to save text inside a parent?

Let's 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 looks like this:

enter image description here

What should I do to always place such texts in the parent div?

+3
source share
4 answers

You can use word-wrap:break-word.

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

JsFiddle example

Alternatively, you can also use overflow:hiddenone that will hide the overflow. It is assumed that the text does not need to be wrapped. JsFiddle example

Finally, there is overflow:scrollone that will allow you to scroll through the overflow. Note. There will always be a scroll bar regardless of the length of the text. To avoid this, you can also use overflow:auto. I do not know what you want. JsFiddle example overflow:scroll

+11

. , - JoshC, (-).

overflow, visible (i.e auto, scroll hidden).

auto:

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

0

, , / .

word-wrap: break-word;

JSFiddle .

0

, . . overflow:hidden, , , . , ( ), word-wrap:break-word word-break:break-word. .

css- -break: break-all?

td?

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

0

More articles:


All Articles