Как я могу принудительно обернуть длинную строку без пробела?

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

Например:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Каким будет CSS-селектор для принудительного переноса этого текста в html:textarea или в xul:textbox?

Ответ 1

для блочных элементов:

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

Ответ 2

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

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC

Ответ 3

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

Как предотвратить длинные слова от разрыва моего 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;

Ответ 4

Для меня это работает,

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

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

Ответ 5

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

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

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

Примечание. Safari, похоже, в конечном итоге завершает длинную строку в <textarea>, в отличие от Firefox.

Ответ 6

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

1) Используйте свойство белого пробела CSS. Чтобы обойти несогласованность браузера, вы должны объявить его несколькими способами. Поэтому просто поместите вашу строку 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) используйте mix-wrap mixin из Compass.

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

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

Ссылка: упаковка содержимого

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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

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

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Это обертывает строку с 50 символами символом <br> тег. Параметр "истина" заставляет строку отрезать.

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

width:100%;
float:left;

Ответ 13

Используйте <wbr> тег:

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

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

Ответ 14

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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