Как слово-брейк на тире?

голоса
60

Учитывая относительно простой CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Как сделать так , чтобы строка остается ограниченным до widthиз 150 , и просто обтекает переводом строки на дефис?

Задан 04/08/2008 в 01:17
источник пользователем
На других языках...                            


10 ответов

голоса
63

Замените дефис с этим:

&shy;

Это называется «мягким» дефисом.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Ответил 04/08/2008 d 01:25
источник пользователем

голоса
31

Во всех современных браузерах * (и в некоторых старых браузерах , тоже), то <wbr>элемент является идеальным инструментом для предоставления возможности разбить длинные слова в определенных точках.

Цитата из этой ссылки:

Слово Перерыв возможность ( <wbr>HTML элемент) представляет собой позицию в тексте , где браузер может необязательно разорвать линию, хотя его линия непосильных правил не иначе создать разрыв в этом месте.

Вот как он может быть использован в примере Ора (или увидеть его в действии на JSFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* Я проверил это в IE9, IE10, и последние версии Chrome, Firefox и Opera, и Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Ответил 30/01/2012 d 07:53
источник пользователем

голоса
17

В рамках CSS3, она еще не полностью поддерживается, но вы можете найти информацию о переносе слов здесь . Другим вариантом является WBR тег & застенчивый ;, и & # 8203; ни один из которых не полностью поддерживаются либо.

Ответил 04/08/2008 d 01:25
источник пользователем

голоса
8

В данном конкретном случае (если ваша строка будет содержать дефисы) Я бы преобразовать текст в этой стороне сервера:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Ответил 05/12/2008 d 13:36
источник пользователем

голоса
8

Ваш пример работает, как ожидается, в Google Chrome, Safari (Windows) и IE8. Текст вспыхнет в 150px поля в Firefox 3 и Opera 9.5.

Кроме того , &shy;не будет работать на вашем примере, как это будет либо:

  • работать, когда слово непосильное, но когда не слово непосильный не отображать любые переносы, или

  • работа, когда не слово непосильное, но дисплей два дефиса, когда слово непосильное, поскольку он добавляет дефис на перерыве.

Ответил 16/09/2008 d 00:15
источник пользователем

голоса
7

В зависимости от того, что вы хотите видеть точно, вы можете использовать комбинацию hyphen, soft hyphenи / или zero width space.

На мягком дефисе, ваш браузер может слово-брейк (добавление дефиса). На нулевой ширины пространства, ваш браузер может слово перерыва (без добавления чего-либо).

Таким образом, если ваш код что-то вроде:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

то ваш браузер будет показывать это, без словесного перерыва:

1111112222222-33333334444444-5555555

и это будет все возможные слова-брейк:

111111-
222222-
-333333
444444-
555555

Просто подобрать нужную опцию. В вашем случае, это может быть один между 4s и 5s.

Ответил 16/09/2010 d 10:04
источник пользователем

голоса
1

Вы также можете использовать:

word-break:break-all;

ех.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

вывод:

abababababa
ababababbba
abbabbababa
ababb

Слово-разрыв разорвать все слово или строку, даже если нет-места в предложении, которое не Feets в предоставленной ширине или высоте. гайка для этого вы должны быть обеспечить ширину или высоту.

Ответил 27/08/2015 d 12:40
источник пользователем

голоса
0

Надеюсь, что это может помочь

использовать <br>(перерыв) тег , где вы хотите разорвать линию.

Ответил 31/08/2017 d 10:53
источник пользователем

голоса
0

Вместо того , -вы можете использовать &hyphen;или \u2010.

Кроме того , убедитесь , что дефис свойство CSS было не установлено ни (значение по умолчанию ручное ).

<wbr>не поддерживается Internet Explorer .

Ответил 14/05/2015 d 04:29
источник пользователем

голоса
0

Неразрывный дефис работает хорошо.

HTML Entity (десятичное)

&#8209;
Ответил 21/03/2014 d 23:09
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more