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

Question

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

Например:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

Answer 1

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

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

для встроенных элементов:

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

Answer 2

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

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Answer 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;

Answer 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.

Answer 5

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

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

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

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

Answer 6

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

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

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

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

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

Answer 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/ с некоторыми дополнительными исследованиями, которые можно найти там.

Answer 8

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

Answer 9

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

Answer 10

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

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

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

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

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

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