Le texte va à l'extérieur div contenant

J'ai cette codepen ici, ne pas le texte passe à la ligne lorsqu'il atteint le bord droit de la div?

html:

<div class="test">

    <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>

css:

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;

}

OriginalL'auteur Blake | 2014-07-30

  1. 8

    Utilisation word-wrap:break-word

    div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}
    les sauts de mots à part, je n'aime pas.

    OriginalL'auteur amol

  2. 1

    Exemple Vivant
    http://codepen.io/elad2412/pen/LAhJw

    div.test {word-break:break-all;}

    OriginalL'auteur Elad Shechter

  3. 1

    J'ai eu ce même problème, coupure de mot n'a pas l'air trop beau pour moi - j'ai trouvé que l'application de la ci-dessous CSS pour le récipient de travail:

     text-overflow: ellipsis;
 overflow: hidden;

    points de suspension a une bonne prise en charge du navigateur trop, lire plus sur les points de suspension ici

    OriginalL'auteur Josh Harris

  4. 0

    dans mon cas, il s'est avéré être ce:

    something&nbsp;something

    compte comme un seul mot long et donc allés à l'extérieur de la div

    Fixe en procédant de la

    something&nbsp; something

    OriginalL'auteur Dennis

  5. 0

    Vous pouvez faire width:auto;, mais si vous voulez spécifiques width:400px; vous pouvez utiliser word-wrap:break-word ou word-wrap:break-all;

    OriginalL'auteur Sam

  6. 0

    Parce que le texte n'a pas tout l'espace, afin de ne pas créer une nouvelle ligne.

    Essayer de mettre:

    [space]/(&nbsp;)/(&#160;)

    Par exemple, j'ai changé mon texte:

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    dans:

    xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

    Il va créer sa propre ligne.

    OriginalL'auteur Dwipa Arantha