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

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

Например:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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

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

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

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

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

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

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

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

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

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

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

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

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

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

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

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

Используйте метод 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;
}

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

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

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

Если вы используете 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 символов с тегом <br>. Параметр 'true' заставляет строку обрезаться.

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

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

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

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

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

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

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

width:100%;
float:left;