Comment forcer une longue chaîne sans blanc à être enveloppée ?

Question

J'ai une longue chaîne (une séquence d'ADN). Elle ne contient aucun caractère d'espacement.

Par exemple :

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Quel serait le sélecteur CSS qui forcerait ce texte à être enveloppé dans une balise html:textarea ou dans un xul:textbox ?

Answer 1

Pour les éléments du bloc :

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

pour les éléments en ligne :

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

Answer 2

Lieu les espaces de largeur nulle aux endroits où vous souhaitez autoriser des pauses. L'espace de largeur nulle est ​ en HTML. Par exemple :

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Answer 3

Pour moi, cela fonctionne,

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

Vous pouvez également utiliser une div à l'intérieur d'une autre div au lieu de td . J'ai utilisé overflow:auto Il s'agit d'une version très complète, qui affiche tout le texte à la fois dans mon navigateur Opera et IE.

Answer 4

Je ne pense pas que vous puissiez faire cela avec CSS. Au lieu de cela, à des "longueurs de mots" régulières le long de la chaîne, insérez un trait d'union HTML :

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Cela affichera un trait d'union à la fin de la ligne, à l'endroit où elle s'enroule, ce qui peut ou non correspondre à ce que vous souhaitez.

Notez que Safari semble envelopper la longue chaîne de caractères dans un fichier <textarea> de toute façon, contrairement à Firefox.

Answer 5

Utiliser une méthode CSS pour forcer l'habillage d'une chaîne de caractères qui ne contient pas d'espaces blancs. Trois méthodes :

1) Utiliser la propriété d'espacement CSS. Pour tenir compte des incohérences des navigateurs, vous devez la déclarer de plusieurs manières. Il suffit donc de placer votre looooongue chaîne de caractères dans un élément de niveau bloc (par exemple, div, pre, p) et de donner à cet élément la CSS suivante :

some_block_level_tag {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

2) utiliser le force-wrap mixin de Compass .

3) Je viens d'étudier cette possibilité et je pense qu'elle pourrait également fonctionner (mais je dois tester le support du navigateur de manière plus complète) :

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

Référence : contenu de l'emballage