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


194

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

Например:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

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


17
По иронии судьбы, строка не переполняется и в переполнении стека ...
splattne

Ответы:


272

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

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

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

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


1
Поддерживается только в IE, Safari и FF3.1 (альфа).
Адам Беллер

1
это работает только в новой волне браузеров - см. caniuse.com/#search=word-break
Михал Бернхард

9
@Michael: В ответе используется правило «перенос слов», а не «разрыв слов»; первый поддерживается так, как он используется почти во всех браузерах, используемых сегодня. Когда указывается «частичная поддержка», оказывается, что значение «break-word» для правила «перенос слов» все еще жизнеспособно.
Робусто

2
С overflow-wrapтех пор собственность переименована в стандарты, но wrod-wrapшироко применяется.
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

1
Также работает с «display: table-cell», в моем случае это было необходимо
Сезар Леон

107

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

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


4
Хорошее предложение, сегодня я узнал что-то новое, спасибо!
Маттео Конта

2
Спасибо за это решение. Мне было трудно заставить что-то подобное работать внутри таблицы, и это единственное решение, которое я нашел, работает в IE, Firefox и Chrome.
Фаринья

1
+1, это работает лучше, так как охватывает больше случаев, хотя вопрос был для более конкретного случая.
Монреалист

2
В качестве альтернативы вы можете использовать <wbr>тег, который служит той же цели, обеспечивая дополнительную возможность разрыва строки.
Justisb

7
Следите, делаете ли вы это в вещах, которые можно скопировать и вставить.
Алекс

42

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

Как не дать длинным словам сломать мой 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
+1 это потому, что в нем упоминается перерыв слова: разбить все; который работал для меня в IE9
Ник Бенедикт

3
word-break: break-all;был единственным, кто работал в Android WebView для меня.
Стэн

Спасибо за word-break: break-all;!
Лонни Бест

18

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

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

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


Это не сработало для меня. Я должен переместить свойство "word-wrap" в div и удалить свойство "overflow". С этими изменениями работает.
Данигонлина

12

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

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

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

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


Вау, даже не знал об этом. Ухоженная!
Даниэль Шаффер

Я тоже не знал об этом. Двойной Аккуратный!
Карл

11

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

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


Да, # 3 там работает во всех современных браузерах и даже более старых IE6 +.
Грэк

1
№ 3 работает, только если есть возможность разбить на слова. Слишком длинная строка не разрывается (проверено на Chrome 52.0.2743.82).
коллапсар

8

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


5

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


3

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


Вы можете смешать это решение с решением Реми, чтобы вставить пробелы нулевой ширины: wordwrap ($ longtext, 5, "& # 8203;", true);
М.В.

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

3

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

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

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


2

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

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

1

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

width:100%;
float:left;

Это полный и простой ответ, я думаю, что парень, который разместил эту проблему изначально, должен использовать ширину: 100%; с поплавком: слева; на элемент, который содержит эту строку, и его проблема будет решена. тогда почему этот ответ не актуален?
TechBrush.Org

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

2
Да, но этот форум не только об этом парне, но и об этом форуме, и другие люди, сталкивающиеся с подобной проблемой, как я сегодня, также могут получить выгоду от того же самого.
TechBrush.Org
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.