Why does this text breaks div tag? How to fix it?_问答_开发者

Why does this text breaks div tag? How to fix it?

开发者 https://www.devze.com 2023-04-02 15:26 出处：网络

I just think I justify div\'s width and height and the text will be inside but I don\'t know why the text goes outside in this case. Why? How to fix it?

相关专题：css

I just think I justify div's width and height and the text will be inside but I don't know why the text goes outside in this case. Why? How to fix it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <title>Content Area Prototype 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link rel="stylesheet" type="text/css" href="content.css" />    
    </head>

    <body>
        <div class="test">      zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
        </div>
    </body>
</html>

This is "content.css"

* {
    margin: 0;
    padding: 0;
}

body {
    width: 480px;
    height: 680px;
    margin: 0 auto;
    overflow: auto-scroll;
    background-color: #212121;
    font-family: "Segoe UI", sans-serif;
}

.test {
    padding: 0.3em;
    margin-bottom:开发者_如何学运维 0.5em;

    background-color: #fff;
    border: 0.3em solid #59922B;
    border-radius: 1.2em;   
}

Update: I want the text is word-wrap in div. overflow: hidden not work.

Update: Why isn't word-wrap default?

Check out the word-wrap CSSproperty (docs)

By adding word-wrap: break-word; to the .test CSS class, the text is constrained to the container:

http://jsfiddle.net/K9tmT/

the text isn't broken up so you need to set the word-wrap to break-word in the css. If you were to put a space in the middle of that text then you will see it will break up into 2 lines instead. It's the same principal behind how MS Word won't break up a word across lines

CSS overflow property can be use in this case

overflow: hidden; in .test

Working example : http://jsfiddle.net/EjFL5/

Try with adding