5

Столкнулся с непонятной мне проблемой в css. Хром переносит слова по дефису. Т.е. фраза: "Проект дома я-455-555", если не влезает в ширину переносит не словом целиком, а может взять и отрезать именно по дефису: "Проект дома я-455-(перенос)555" введите описание изображения здесь

Никакие white-space, типа pre-wrap, pre-line не работают.

Кто-нибудь сталкивался с этой проблемой?

4 ответа 4

4

Как вариант использовать неразрывный дефис

http://jsfiddle.net/nghtpxwc/

<p>Проект дома я&#8209;455&#8209;555</p>
p { 
    white-space: pre-wrap;
    width: 150px;
    min-height: 100px;
    border: 1px solid #000000;  
    padding: 10px;
}

или так http://jsfiddle.net/jmwqngjc/

3
  • 1
    Как я писал pre-wrap не работает. Все равно переносит именно по дефису. Неразрывный дефис просто так не получится вставить, ибо название проекта вбивается через админку в обычное текстовое поле. Заставить девочку-контентщицу вставлять вместо дефисов такие "крокозябры" не вариант. Остается JS-скриптом? Но это жестоко будет. Позиций-то почти под 1000. На клиенте машина будет висеть нещадно. Странно, что такая вещь творится именно в Хроме. В Лисе всё отлично - перенос слова целиком.
    – Romancho
    Commented 3 апр. 2015 в 18:34
  • а второй вариант jsfiddle.net/jmwqngjc?
    – soledar10
    Commented 3 апр. 2015 в 19:13
  • неужели это такая большая проблема - заставить исполнителя вместо дефиса вставлять из буфера обмена &#8209; ?.. гнал бы взашей таких "девочек-контентщиц"...
    – deivan_
    Commented 3 апр. 2015 в 21:37
3

Если это частный случай, то можно посмотреть в сторону тега nobr

2

Используйте преобразование дефиса при сохранении в БД.

Код для php (между вторыми кавычками стоит неразрывный дефис):

$content = str_replace('-', '‑', $content);
0

Вы можете убрать перенос совсем. Для этого используйте следующие стили:

p{
    white-space: nowrap;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.