CSS: как я могу заставить длинную строку (без пробелов) быть обернутой в XUL и / или HTML

У меня длинная строка (последовательность ДНК). Он не содержит пробелов. например: 

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

каким будет селектор css, чтобы заставить этот текст быть обернутым в html:textarea или в xul: textbox

163
css html string wrapping xul

14 ответов

для элементов блок:

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

вложенные элементы:

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

место нулевой ширины пространства в точках, где вы хотите разрешить перерывы. Пространство нулевой ширины -&#8203; в HTML. Например:

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

99

вот некоторые очень полезные ответы:

как предотвратить длинные слова от нарушения моего div?

чтобы сэкономить ваше время, это можно решить с помощью 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;
31

для меня это работает.

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

вы также можете использовать div внутри другого div вместо td. Я использовал overflow:auto, поскольку он показывает весь текст как в моих браузерах Opera, так и в IE.

18

Я не думаю, что вы можете сделать это с помощью CSS. Вместо этого при регулярных "длинах слов" вдоль строки вставьте HTML-софт-дефис:

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

это отобразит дефис в конце строки, где он обертывается, который может быть или не быть тем, что вы хотите.

Примечание Safari, кажется, обернуть длинную строку в <textarea> в любом случае, в отличие от Firefox.

12

используйте метод CSS, чтобы принудительно обернуть строку без пробелов. Три метода:

1) используйте свойство CSS white-space. Чтобы покрыть несоответствия браузера, вы должны объявить его несколькими способами. Поэтому просто поместите строку looooong в некоторый элемент уровня блока (например, div, pre, p) и дайте этому элементу следующий css:

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) использовать force-wrap mixin от компаса.

3) я просто смотрел на это, и я думаю может также работать (но мне нужно проверить поддержку браузера более полностью):

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

ссылки: оборачивания

10

мой путь (когда нет подходящего способа вставить специальные символы) через 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;

Как найдено здесь:http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ с некоторыми дополнительными исследованиями, которые можно найти там.

6

на word-wrap:break-word; чтобы работать на меня, я должен был убедиться, что display был установлен до block, и что ширина была установлена на элементе. В Safari он должен был иметь p тег и width пришлось установить в ex.

5

Если вы используете PHP, то функция wordwrap хорошо работает для этого: http://php.net/manual/en/function.wordwrap.php

решение CSS word-wrap: break-word; Не кажется согласованным во всех браузерах.

другие языки на стороне сервера имеют аналогичные функции-или могут быть построены вручную.

вот как работает функция PHP wordwrap:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

это обертывает строку в 50 символов с тегом
. Параметр 'true' заставляет строку быть разрезанной.

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

просто width и добавить float работал для меня :-)

width:100%;
float:left;
1

в случае, когда таблица не имеет фиксированного размера, ниже строка работала для меня:

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

использовать <wbr>tag:

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

Я думаю, что это лучше, чем использовать нулевой ширины пространства &#8203; что может вызвать проблемы при копировании текста.

0

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = html_entity_decode (wordwrap ($string, 50,"
", true)); это правильный код

-2