Як я можу змусити довгу струну без загортання будь-якої порожньої?

У мене довга струна (послідовність ДНК). Він не містить символів пробілу.

Наприклад:

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

Ось кілька дуже корисних відповідей:

Як не допустити, щоб довгі слова зламали мою діву?

щоб заощадити ваш час, це можна вирішити за допомогою 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

Це відобразить дефіс в кінці рядка, де він загортається, що може бути, а може і не бути тим, що ви хочете.

Зауважте, схоже, Safari все-таки обертає довгу струну <textarea>, на відміну від Firefox.

Використовуйте метод 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) використовуйте мікс-компрес від 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:

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