Maison > interface Web > tutoriel CSS > Comment envelopper du texte dans un élément sans espaces ?

Comment envelopper du texte dans un élément sans espaces ?

DDD
Libérer: 2024-11-10 14:56:03
original
1019 Les gens l'ont consulté

How Do I Wrap Text Inside a <td> Élément sans espaces ? 
Élément sans espaces ? " />

Envelopper le texte sans espaces à l'intérieur d'un

Pour envelopper le texte à l'intérieur d'un élément sans autoriser les espaces dans le texte, comme dans le cas de séquences continues de caractères, plusieurs propriétés CSS peuvent être utilisées.

La propriété word-break: break-all permet aux mots de se séparer n'importe où, même à l'intérieur des caractères. Cependant, cette propriété à elle seule peut ne pas être suffisante. dans tous les navigateurs.

Pour garantir la compatibilité et obtenir le comportement d'emballage souhaité, une combinaison de propriétés supplémentaires peut être appliquée :

  • white-space: -moz-pre-wrap !important ;: Navigateurs Mozilla
  • espace blanc : -webkit-pre-wrap ; : navigateurs Chrome et Safari
  • espace blanc : -pre-wrap ; : navigateurs Opera 4-6
  • espace blanc : -o-pre-wrap ; : navigateurs Opera 7
  • espace blanc : pré-enveloppement ; : navigateurs compatibles CSS3
  • word-wrap : break-word ; : Navigateurs Internet Explorer 5.5

De plus, la propriété white-space: normal; doit être incluse comme déclaration finale pour garantir un emballage correct dans tous les navigateurs.

Pour implémenter cette solution , appliquez la classe CSS suivante au element :

.wrapword {
    white-space: -moz-pre-wrap !important;  
    white-space: -webkit-pre-wrap;          
    white-space: -pre-wrap;                 
    white-space: -o-pre-wrap;               
    white-space: pre-wrap;                  
    word-wrap: break-word;                  
    word-break: break-all;
    white-space: normal;
}
Copier après la connexion

Ensuite, enveloppez le texte que vous souhaitez envelopper dans un élément avec l'attribut class="wrapword":

<table>
    <tr>
        <td class="wrapword">
            your text here
        </td>
    </tr>
</table>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal