web-dev-qa-db-fra.com

Pourquoi Word-wrap ne fonctionne-t-il pas correctement en CSS3?

Pourquoi la propriété wrap Word ne fonctionne-t-elle pas correctement dans l'exemple ci-dessous?

http://jsfiddle.net/k5VET/739/

Que puis-je faire pour que la partie de la parole "consectetur" soit dans la première ligne Je veux un nombre maximum de caractères pour tenir dans chaque ligne.

Le css est:

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    Word-wrap:break-Word;
    border:2px solid; }
htmlcssstringword-wrap
38
user930514

Utilisez Word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
Word-break: break-all;
    border:2px solid; }

LIVE DEMO

53
Sowmya

Si Word-wrap: break-all ne fonctionne pas, essayez aussi d'ajouter ceci:

white-space:normal;

travaille pour moi avec la classe .btn dans Bootstrap 3

129
Jason Leung

Il ne s’emballe pas correctement, car les navigateurs n’appliquent pas de coupure de mots automatique (ce qui serait le moyen de provoquer proper wrapping) par défaut. Vous devez utiliser une césure CSS ou une césure JavaScipt. Le paramètre Word-wrap:break-Word, ainsi que Word-break: break-all, par définition rompt mots (les scinde en morceaux lors de poin tres arbitraires), au lieu d’un habillage approprié.

2
Jukka K. Korpela

Le css Word-wrap ne fonctionnant pas dans tous les navigateurs, utilisez plutôt JavaScript! Cela devrait donner le même résultat.

La fonction ci-dessous nécessite JQuery et sera exécutée à chaque redimensionnement de la fenêtre temporelle.

La fonction vérifie si l'élément a plus de largeur que son parent, et s'il en a, il coupe tout au lieu de mots. Nous ne voulons pas que les enfants grandissent plus grands que leurs parents, non?

Je n'en avais besoin que pour les tables, donc si vous le souhaitez dans un autre élément, remplacez simplement "table" par "#votreID" ou ".votreClasse". Assurez-vous qu'il y a un parent-div ou changez "div" en "body" ou quelque chose?

S'il passe à autre chose, il se change en Word-break et vérifie ensuite si cela doit changer, c'est pourquoi il y a tant de code ..: '/

$(window).on('resize',function() {
    $('table').each(function(){
        if($(this).width() > $(this).parent('div').width()){
            $(this).css('Word-break', 'break-all');
        }
        else{
            $(this).css('Word-break', 'break-Word');
            if($(this).width() > $(this).parent('div').width()){
                $(this).css('Word-break', 'break-all');
            }
        }
     });
}).trigger('resize');

J'espère que cela fonctionne pour vous!

1
SebHallin

Je sais donc que c’est une vieille question, mais je pense sérieusement qu’il pourrait être utile de préciser quand utiliser quelle propriété. En regardant les réponses existantes, je pense qu’elles offrent des solutions sans explication. Voici donc ma tentative d’aider à cet égard. Pour le contexte, par défaut, le conteneur n'essaiera pas de casser un seul long mot parce qu'il veut conserver le mot dans sa forme d'origine.

Cela dit, il existe 3 façons principales de décomposer mots: overflow-wrap , Word-break et hypens . Je ne vais pas plonger trop profondément dans les hypens cependant.

Alors d'abord. Je vois que Word-wrap est utilisé dans la question mais la lecture de la documentation est obsolète et certains navigateurs ont décidé de simplement l'aliaser avec overflow-wrap. Il a probablement préféré ne pas utiliser cela.

La distinction entre les deux propriétés est assez claire dans la documentation, mais pour plus de clarté, overflow-wrap n'a en réalité que deux valeurs possibles et détectera si un mot a été dépassé. Si c'est le cas, par défaut, il déplace le mot entier vers la ligne suivante. Si break-Word est défini, il ne divisera le mot que si le mot entier ne peut pas être placé sur cette ligne.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-Word;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest Word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

Vous pouvez voir le pneumonoul ... long Word rompt exactement là où il doit sur la ligne suivante après avoir tenté de séparer le long Word.

En revanche, nous avons Word-break. Cela a des propriétés plus granulaires et a également une option break-Word. C’est également le cas pour l’extrait ci-dessus, donc quand utiliser l’un ou l’autre est plutôt trivial. 

Cependant, Word-break offre également une valeur break-all qui cassera le mot Word dans la mesure du possible pour s’adapter à Word où il était initialement prévu. Il n'essaie pas de savoir s'il a besoin que la Parole apparaisse sur une nouvelle ligne ou pas - il enfonce simplement le saut de ligne où il déborde. La plus grande différence entre ce qui précède et ce qui précède est que le mot long que nous utilisons est toujours au sommet.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    Word-break: break-all;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest Word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

Et enfin, pour hyphens, ils ont leur propre façon de séparer les mots. Pour plus d'informations, jetez un coup d'œil à documentation . Il convient également de noter que différentes langues ont différentes façons de séparer les mots, mais heureusement, la propriété hyphens s'accroche à l'attribut lang et comprend ce qu'il faut faire.

Une autre option proposée par les utilisateurs consiste à utiliser la propriété white-space qui tente de séparer le texte par spaces. Dans l'exemple que j'ai utilisé, cela n'aide pas notre situation car le mot lui-même est plus long que le conteneur. Je pense que la chose importante à noter à propos de cette propriété CSS est que celle-ci ne tente pas de séparer les mots en eux-mêmes, mais plutôt de le faire via des espaces, le cas échéant. 

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest Word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

J'espère que cela t'aides.

1
aug

Ceci est utile pour insérer du texte sur une seule ligne:

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    width: 100%;
}
0
Manolo