Css перенос по буквам: word-wrap | htmlbook.ru

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры

Указанные ниже свойства CSS определяют как переносить длинные слова:

1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел   и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то <wbr> или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
2. после любого символа.
3. согласно правилам русского языка с автоматическим применением дефиса.

overflow-wrap▼break-wordword-wrap▼break-wordword-break▼keep-allbreak-all

line-break▼loosenormalstricthyphens▼noneauto

уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти­килограммовый корчеватель‐бульдозер‐погрузчик

<style>
. div {
  overflow-wrap: normal;break-word;  
  word-wrap: normalbreak-word;
  word-break: normal;keep-all;break-all;  
  line-break: autoloosenormalstrict;  
 -webkit-hyphens: none; -webkit-hyphens: auto; -ms-hyphens: none;-ms-hyphens: auto; hyphens: manualnoneauto;  
  width: 50%;
  white-space: nowrap;}
</style>
<div lang="ru"lang="ru">уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти&shy;килограммовый корчеватель‐бульдозер‐погрузчик</div>

В чём состоит различие одно свойства от другого

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

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all;.

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none;.

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all;, которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto;, последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru".

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридиновые

<div lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span>пиридино</span>вые</div>
<style>
.hyphens {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ 
  text-align: justify;
}
.nohyphens {
  white-space: nowrap;
}
</style>

html — Перенос строк CSS PHP

джентльмены! Возникла такая ситуация. Есть блок с текстом, текст выводится пользовательский. Сейчас, если в тексте есть пробелы, то если текст не умещается в блок, то он переносится на месте пробела и текст выглядит красиво, слова не разбиваются по буквам. Проблема в том, что если пользователь введёт строку без пробелов, то такая строчка не переносится и выходит за блок. Оба эти варианта решаются word-break, но он решает одну проблему и создаёт проблему другим случаем.

Вопрос: можно ли сделать на CSS/HTML или PHP так, что если в тексте есть пробелы, то он будет разбиваться там, а если в тексте нет пробелов, то текст будет переносится автоматически, если он не умещается. Ну и ситуация, если в тексте 1000 символов и 1 пробел, то текст не должен делится на 2 части и в итоге уезжать за его приделы. Как можно сделать такой перенос, чтобы исправить оба случая?

Заранее, большое спасибо!

• php
• html
• css
• перенос

2

Как один из вариантов.

    .div {
        padding: 10px 10px 10px 10px;
        background-color: #003eff;
        color: white;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: keep-all;
        line-break: normal;
        -webkit-hyphens: none;
        width: 150px;
        border: 4px double black;
    }

<div>fosdhfohsdoighodhgpsdhgpahdgokshdogkjhsdkjhgksjdhgjkshdglkjhsdljkghsdlkjhglkjsdhglkjhsdlgkjhsdljkhglksjdhglkjsdhglkjhsdlkjhg</div>
<div>Совесть человечества спит, и не стоит рассчитывать, что она когда-нибудь проснется сама по себе.  Это так же невозможно, как попытка вытащить самого себя из болота за волосы. Нужна помощь извне</div>
<div>— Теория — этоосновапрактики.Развеисследованиефундаментальныхзаконовприроды непринесетобществусамуюбольшуюпрактическуюпользу?</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

twitter bootstrap — перенос слов CSS с плавающими элементами

спросил 9 лет, 11 месяцев назад

Изменено 9 лет, 11 месяцев назад

Просмотрено 11 тысяч раз

У меня есть боковая панель фиксированной ширины, состоящая из загрузочного навигационного списка , где некоторые элементы списка имеют метки, выровненные по правому краю.

Например:

 

  abc_test_randomrandom
  0000

 

Однако это не работает, если ссылка длинная. Он расширяется, чтобы заполнить всю строку, и выдвигает метку на следующую строку.

Я разместил демонстрацию jsFiddle, чтобы продемонстрировать это поведение. РЕДАКТИРОВАТЬ: А теперь суть.

Желаемое поведение: abc_test_randomrandom и 0000 в одной строке с переносом длинной строки на следующую строку, если это необходимо. Это возможно?

• css
• twitter-bootstrap

Да. Используйте фиксированную ширину и задайте overflow: hidden; за превышение с текст-многоточие .

 li a {ширина: 60%; переполнение: скрыто; отображение: встроенный блок; переполнение текста: многоточие; пробел: nowrap;}
li span {ширина: 40%; отображение: встроенный блок;}
 

Я не могу открыть jsFiddle. Так что не мог увидеть точную проблему.

2

Я думаю, что решение Praveen на самом деле является лучшей реализацией, но чтобы получить первоначально запрошенное поведение, display: inline-block , word-wrap: break-word и установка ширины исправляет это.

 li a {ширина: 70%; отображение: встроенный блок; перенос слов: слово-разрыв;}
 

В Bootstrap pull-right — это, по сути, просто оболочка для CSS float. Вам нужно поместить диапазон 0000 перед abc_test_randomrandom в разметке, и при необходимости он должен переносить якорь на две строки, чтобы ваш плавающий элемент располагался перед элементом, вокруг которого он плавает. Возможно, вам придется установить поле справа от привязки, чтобы оно было шириной вашего плавающего элемента. Я не могу загрузить jsFiddle прямо сейчас, иначе я бы дал вам лучший пример. Я попробую перепроверить.

РЕДАКТИРОВАТЬ: мне удалось загрузить ваш jsFiddle.

Если вы переместите интервалы перед якорями в своем HTML и добавите этот CSS, это сработает. Если в вашем тексте буквально будут символы подчеркивания вместо пробелов, вам понадобится CSS для переноса слов, который вы упомянули в своем собственном ответе.

Преимущество этого заключается в том, что для работы в более старых версиях IE не требуются хаки CSS (например, для отображения: встроенный блок), если это касается вашего проекта.

 .nav-list a { display: block; поле справа: 30px; }
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Избегайте переноса строк, если это не необходимо с помощью CSS

спросил 9 лет, 2 месяца назад

Изменено 9лет, 2 месяца назад

Просмотрено 893 раза

Можно ли использовать CSS для автоматического управления переносом строк таким образом, чтобы при изменении размера окна браузера происходило следующее:

• s1 и s2 остаются на одной строке, когда они оба могут поместиться в div
• s2 переносится на вторую строку, когда они больше не могут уместиться без упаковки
• s2 переносится, когда он больше не помещается в div

HTML:

 <тело>
    <дел>
        Lorem ipsum dolor:
        сесть вместе с консектетур adipiscing eli