перенос слов по дефису

#html #css

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


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

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

Ответы

Ответ 1

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

http://jsfiddle.net/nghtpxwc/

Проект дома я‑455‑555


p { 
    white-space: pre-wrap;
    width: 150px;
    min-height: 100px;
    border: 1px solid #000000;  
    padding: 10px;
}


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


Ответ 2

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


Ответ 3

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

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

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


Ответ 4

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

p{
    white-space: nowrap;
}