css перенос слов с дефисами

Question

У меня есть строка текста в div, которая может выглядеть следующим образом:

A really long user defined team Name 1 (7-0)

Где 7-0 будет рекордом команды. Это в div определенной ширины, и иногда браузеру нравится разбивать дефис, который нежелателен, потому что его следует рассматривать так же, как слово. Так что я мог бы в конечном итоге:

A really long user defined team Name 1 (7
-0)

Есть ли способ заставить перенос слов работать, когда он обрабатывает дефис, как если бы он был нормальным символом, а не местом, которое должно поддерживать разрыв?

Answer 1

Хотя принятый ответ и работает отлично, вам следует подумать об использовании несколько более очевидного стиля CSS для этого:

CSS:

.together {
    white-space: nowrap;
}

HTML:

<p>A really long user defined team Name 1 <span class="together">(7-0)</span></p>

Answer 2

http://jsfiddle.net/zfsYK/4/

вот, пожалуйста.

Я только что обернул текст, который вы не хотите разбивать, в наборе div, установленном на display:inline..

сейчас не может сломаться

Answer 3

В зависимости от контекста решение этой проблемы контента может быть более уместным, чем решение проблемы на уровне представления. Предполагая, что вы хотите, чтобы это никогда не нарушалось переносом слов, даже если кто-то скопировал / вставил его с вашего сайта в другое место, замените дефис неразрывным дефисом. Unicode U + 02011, который может быть вставлен в HTML как A really long user defined team Name 1 (7‑0).

Answer 4

Для тех, кто ищет решение. Вы должны применять white-space: nowrap к каждому из ваших заштрихованных слов в тексте. Я сделал это для себя, может быть, это поможет:

https://jsfiddle.net/ooj6kmx1/21/

Привет