Блог

Главная - Вопросы по программированию - Как обернуть или разбить слово, которое уже содержит несколько дефисов в CSS?

Как обернуть или разбить слово, которое уже содержит несколько дефисов в CSS?

#html #css #word-wrap #word-break

#HTML #css #перенос слов #разрыв слова

Вопрос:

Я хочу обернуть или разбить слово, в котором есть несколько дефисов, таких как «лицом к лицу» или «все или ничего». Такие слова и выражения, похоже, не разбиваются естественным образом в HTML.

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

Вот пример:

 <style>
.two-hyphens {
width: 10px;
font-size: 40px;
border: 1px solid #000;
}
</style>

<div class="two-hyphens">
Face to face
<br><br>
Face-to-face
</div>

Ответ №1:

Попробуйте следующее:

 .breakAtHyphen {
  word-break: keep-all;
}

Убедитесь, что вы назначили этот класс своему тегу, содержащему текст.

Вот ресурс, который должен помочь с пониманием word-break свойства: CSS Word-Break Property

Комментарии:

1. Учитывая это: поведение word-break: keep-all описывается как » разрывы [word] не должны использоваться для текста на китайском / японском / корейском языках (CJK). Поведение текста, отличного от CJK, такое же, как и для обычного. » Я немного удивлен, что это решает проблему (ссылка: word-break .

2. @DavidsaysreinstateMonica Основываясь на примере w3schools, который я опубликовал в ответе, приведенный ими пример конкретно касается разрыва дефисов. Однако очень интересно, что разрывы не работают с текстом CJK. Каждый день изучайте что-то новое!

3. Я пытался word-break: keep-all , но это не работает. Может быть, есть другие теги на более высоких уровнях, которые могут мешать? Я пробовал на многих уровнях, но безуспешно. Я обнаружил, что перенос дефиса в div с display:inline-block свойствами сделал свое дело и работал везде.

4. @johnnyg0 Если вы разместите код там, где находится текст, я, возможно, смогу немного помочь. Если вы собираетесь, обязательно разместите как HTML, так и CSS

5. @lime Я только что добавил пример кода, в котором он не работает. Я нашел обходной путь, который я опубликовал ниже. Это работает, но немного неуклюже. Может быть, у вас есть лучшее решение?

Ответ №2:

вы пробовали использовать javascript или jquery? попробуйте использовать replace для замены —

Ответ №3:

Я обнаружил, что перенос дефиса в div с помощью свойств display:inline-block, похоже, делает свое дело.

 face<div style="display: inline-block;">-</div>to<div style="display: inline-block;">-</div>face<br>

И все же мне интересно, есть ли лучшие способы сделать это.