web-dev-qa-db-fra.com

CSS: comment forcer une longue chaîne (sans blanc) à être enveloppée dans XUL et/ou HTML

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 placé dans un html: textarea ou dans un xul: textbox

htmlcssstringxulwrapping
169
Pierre

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>

246
heeen

Placez espaces de largeur zéro aux points où vous souhaitez autoriser les pauses. L'espace de largeur nulle est &#8203; en HTML. Par exemple:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

101
Remy Blank

Voici quelques réponses très utiles:

Comment empêcher les longs mots de casser mon 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;
34
emik

Pour moi ça marche,

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

Vous pouvez également utiliser un div dans un autre div au lieu de td. J'ai utilisé overflow:auto, car il affiche tout le texte dans les navigateurs Opera et IE.

18
Rani

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

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

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

Remarque Safari semble en tout cas enrouler la chaîne longue dans un <textarea>, contrairement à Firefox.

12
Peter Hilton

Utilisez une méthode CSS pour forcer le retour à la ligne d'une chaîne ne contenant aucun espace. Trois méthodes:

1) Utilisez la propriété CSS white-space. Pour couvrir les incohérences du navigateur, vous devez le déclarer de plusieurs manières. Il suffit donc de placer votre chaîne looooong dans un élément de niveau bloc (par exemple, div, pre, p) et de donner le css suivant à cet élément:

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

3) J'étais juste en train de regarder ça aussi et je pense que ça pourrait aussi marcher (mais j'ai besoin de tester plus complètement le support du navigateur):

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

Référence: contenu d'emballage

10
Graeck

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 trouvé ici: http://kenneth.io/blog/2012/03/04/Word-wrapping-hypernation-using-css/ Avec quelques recherches supplémentaires à trouver ici.

7
Ben

Pour que Word-wrap:break-Word; fonctionne pour moi, je devais m'assurer que display était défini sur block et que la largeur était définie sur l'élément. Dans Safari, il devait comporter une balise p et la variable width devait être définie sur ex.

5
innerurge
<textarea style="width:100px; Word-wrap:break-Word;">
  place your text here
</textarea>
3
user5217984

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

La solution CSS Word-wrap: break-Word; ne semble pas être cohérente sur tous les navigateurs.

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

Voici comment fonctionne la fonction PHP wordwrap:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

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

3
Dave

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;"
2
rakpan

mettre juste width et ajouter float a fonctionné pour moi :-)

width:100%;
float:left;
1
TechBrush.Org

Utilisez <wbr> tag:

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

Je pense que c'est mieux que d'utiliser &#8203; sans largeur nulle, ce qui pourrait poser des problèmes lorsque vous copiez le texte.

0
warvariuc