Des mots brisés en utilisant CSS

Question

Lorsque le texte dans <p> La balise est trop longue, il semble que ceci, comment empêcher cela avec CSS? J'ai essayé la propriété CSS word-break: break-all; Mais Firefox et Opera ne soutiennent pas cette propriété, et en plus de ces autres mots "normaux" qui se brisent également. Je veux donc ne casser que très longs mots, mais pas les mots courts, selon la largeur du blanc <div>.

body {
    background-color: #ccc;
}
h2 {
    float: left;
    color: #525254;
    margin: 0px;
    font: bold 15px Arial, Helvetica, sans;
}
.post {
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
}
.post_cell {
    display: table-cell;
    vertical-align: middle;
}
.post_body {
    display: table-cell;
    width: 400px;
    opacity: 0.8;
}
.profile_img {
    border: solid 3px #ccc;
    width: 48px;
    height: 48px;
    margin: 0px 15px;
}
.post_info {
    color: #c3c3c3;
    font: normal 12px Arial, Helvetica, sans;
    margin-left: 8px;
}
a.no_style {
    color: inherit;
    text-decoration: inherit;
    font: inherit;
}
p {
    float: left;
    clear: both;
    color: #525254;
    margin: 0px;
    padding: 0px;
    line-height: 18px;
    font: normal 15px Arial, Helvetica, sans;
    word-wrap: break-word;
}

<div class="post">
    <div class="post_cell">
        <input type="checkbox" />
    </div>
    <div class="post_cell">
        <img class="profile_img" src="" height="48">
    </div>
    <div class="post_body">
        <div class="post_details">
            <h2>
                <a href="javascript:void(0)" target="_blank" class="no_style">user</a>
            </h2>
            <span class="post_info">
                <span class="passed_time">15 hours ago</span> | 
                <a href="javascript:void(0)" class="no_style">3 Comments</a>
            </span>
        </div>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Vous pouvez consulter ceci pour en savoir plus: http://jsfiddle.net/le4zk/16/

Answer 1

Écrire cela word-wrap: break-word; à la place de word-break: break-all;

ÉDITER :

Peut-être que c'est un bug avec display:table propriété. J'ai fait quelques changements dans CSS: display:table dans parent Div.

.post{
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
    display:table;
}

Retirer display:table-cell de .post_body CSS:

.post_body{
    width: 580px;
    opacity: 0.8;
}

Vérifiez si cela Exemple Fonctionne pour vous.

Answer 2

Il y a longtemps, j'ai essayé de résoudre ce problème et je n'ai pas trouvé de solution CSS uniquement à croisement, j'ai donc fini par insérer des espaces à largeur zéro ​ en mots longs en utilisant javascript:

var breakableLongWord = '';
for( var i = 0; i < longWord.length; i += 10 ) {
    if( i ) breakableLongWord += String.fromCharCode( 8203 );
    breakableLongWord += longWord.substr( i, 10 );
}

Comme je l'ai dit, il y a longtemps, vous pourriez donc trouver une meilleure solution avec les nouvelles technologies de navigateur.

Answer 3

La bonne propriété est word-wrap: break-word.

Vous pouvez spécifier soit normal ou break-word valeur avec le word-wrap propriété. normal signifie que le texte étendra les limites de la boîte. break-word signifie que le texte s'enroulera à la ligne suivante.

word-wrap est pris en charge dans IE 5.5+, Firefox 3.5+ et les navigateurs WebKit tels que Chrome et Safari.

Answer 4

Dans le jsfiddle ici jsfiddle.net/le4zk, votre <p> est flotté à gauche. Pour commencer, supprimez ceci. Aussi, .post_body a un affichage de table-cell. Enlève ça. Alors vous verrez que le word-wrap est respecté mais votre <p> est trop grand à 580px.

Essayez d'éviter d'utiliser le table-cell Disposition dans la mesure du possible, comme à partir de l'exemple donné, il n'est pas particulièrement nécessaire.

Answer 5

Vérifier cette la solution.

Le problème était le <p> Longueur de balise. Lui donner un pourcentage de largeur basé sur le parent avec une position définie sur un relatif semble résoudre le problème. J'ai également enveloppé le contenu dans une autre div.

L'astuce consiste à contenir tout le long élément à l'intérieur d'un div parent, puisque vous modifiez les propriétés d'affichage et en utilisant flottant, cela maintiendra le flux de contenu normal pour les éléments à l'intérieur des div.

Answer 6

j'utiliserais overflow-x: hidden sur votre conteneur parent.