Перенос слова полностью через css, как реализовать?

Question

[Антон Вебсайтовский]

Здравствуйте.

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

Comments

[Алексей]

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

Answer 1

[Дмитрий]

Вы понимаете что у вас перенос УЖЕ запрограммирован? Ищите какой участок кода программирует ваши нынешние переносы и удаляйте/закомментируйте его. Уберите в своем коде примерно вот это:

-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;

Comments

[Антон Вебсайтовский]

Вот стиль для вывода заголовка

.services_item_title {
font-size: 12px;
text-transform: uppercase;
text-align: center;
margin-top: 20px;
font-weight: 400;
color: #ffffff;
margin-left: 20px;
margin-right: 20px;
height:50px;
}

[Антон Вебсайтовский]

Вот скрин, он слово переносит но делит его, а надо чтобы полностью переносил, не делил. c2n.me/3CmTiMr

[Антон Вебсайтовский]

Не совсем понял, что убрать, что оставить в стилях.

[Алексей]

Антон Вебсайтовский: У вас где-то в нормализаторе или в стилях фреймворка с которым вы работаете это задано. Но в принципе можно переписать с !important для тех элементов которые необходимы. Надо добавить свойство: "hyphens: manual !important;"

[Ankhena]

Антон Вебсайтовский: Открываете инспектор кода, ту вкладку, где "скомпилированный стиль" и ищете строчку где написано про свойство hyphens. Дальше тырцаете в нее и смотрите в каком месте CSS задано это свойство. Убираете его оттуда.

Либо просто перебиваете для нужных селекторов.

[Антон Вебсайтовский]

Вот так вот сработало, hyphens: manual !important; а работает в каких браузерах так?

hyphens - о нашел в css в боди было, я то думаю че не рабоает. а как лучше оставить вот это hyphens: manual !important;

или

-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;

[Дмитрий]

Антон Вебсайтовский: УДАЛИТЕ его там, где нашли "hyphens - о нашел в css в боди было". Вариант с !important будет работать во всех браузерах, но это только крайняя мера. Такой вариант нельзя использовать в продакшине) (можно, но за это нормальные разработчики забросают вас камнями)

[Дмитрий]

Антон Вебсайтовский: и да, когда у вас больше двух margin-ов – пишите их в одну строку
margin: 20px 20px 0;
Просто хороший тон)

[Антон Вебсайтовский]

Дмитрий: а что писать?
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;

это?

[Антон Вебсайтовский]

Дмитрий: разницы особой нет как писать маргин, просто чуть короче будет код )

[Дмитрий]

Антон Вебсайтовский: ничего писать не нужно, просто удалить) А на счет маргина: да, разницы никакой, но когда у блока больше 20 стилей, лучше ведь сразу увидеть какие у него маргины, чем по-отдельности)

Answer 2

[Justin Bieber]

Как переносить буквы с CSS?

Comments

[Антон Вебсайтовский]

не работает, мне надо чтобы не делил слово, а переносил полностью на новую строку.

Answer 3

[Алексей Уколов]

Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста.

hyphens

Comments

[Антон Вебсайтовский]

такой вариант он не подходит, я пробовал, слово целиком не переносит на новую строку.