Comment puis-je forcer une longue chaîne sans aucun blanc à enrouler?

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

Par exemple:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Quel serait le sélecteur CSS pour forcer ce texte à être enveloppé dans un html:textareaou dans un xul:textbox?

pour les éléments de 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>

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

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Voici quelques réponses très utiles:

Comment empêcher de longs mots de casser ma div?

pour vous faire gagner du temps, cela peut être résolu avec css:

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;

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 un div à l'intérieur d'un autre div au lieu de td. J'ai utilisé overflow:auto, car il montre tout le texte à la fois dans mes navigateurs Opera et IE.

Je ne pense pas que vous puissiez le faire avec CSS. Au lieu de cela, à des «longueurs de mots» régulières le long de la chaîne, insérez un tiret logiciel HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Cela affichera un trait d'union à la fin de la ligne, où il se termine, qui peut ou non être ce que vous voulez.

Remarque Safari semble envelopper la longue chaîne de <textarea>toute façon, contrairement à Firefox.

Utilisez une méthode CSS pour forcer l'habillage d'une chaîne qui n'a pas d'espaces blancs. Trois méthodes:

1) Utilisez la propriété d'espace blanc CSS. Pour couvrir les incohérences du navigateur, vous devez le déclarer de plusieurs façons. Il suffit donc de mettre votre chaîne looooong dans un élément de niveau bloc (par exemple, div, pre, p) et de donner à cet élément le CSS suivant:

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) utilisez le mixin force-wrap de Compass .

3) J'étais juste en train d'examiner cela et je pense que cela pourrait également fonctionner (mais je dois tester le support du navigateur plus complètement):

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

Référence: encapsulation de contenu

Mon chemin à parcourir (quand il n'y a pas de moyen approprié d'insérer des caractères spéciaux) via CSS:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Comme on le trouve ici: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ avec quelques recherches supplémentaires à y trouver.

Pour word-wrap:break-word;travailler pour moi, je devais m'assurer que le displayétait réglé sur block, et que la largeur était réglée sur l'élément. Dans Safari, il devait avoir un ptag et le widthdevait être installé ex.

Si vous utilisez PHP, la fonction wordwrap fonctionne bien pour cela: http://php.net/manual/en/function.wordwrap.php

La solution CSS word-wrap: break-word;ne semble pas cohérente dans tous les navigateurs.

D'autres langages côté serveur ont des fonctions similaires - ou peuvent être construits à la main.

Voici comment fonctionne la fonction wordwrap PHP:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

Cela enveloppe la chaîne à 50 caractères avec une balise <br>. Le paramètre «true» force la chaîne à être coupée.

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

Utiliser la <wbr>balise:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

Je pense que c'est mieux que d'utiliser un espace de largeur nulle ​qui pourrait causer des problèmes lorsque vous copiez le texte.

Dans le cas où la table n'est pas de taille fixe, la ligne ci-dessous a fonctionné pour moi:

style="width:110px; word-break: break-all;"

le réglage widthet l'ajout ont floatfonctionné pour moi :-)

width:100%;
float:left;