Перенос слов в тексте html, css

Задать вопрос

Вопрос задан

Изменён 5 лет 1 месяц назад

Просмотрен 20k раз

Есть текст в <pre> теге. Слова в тексте не переносятся, а режутся. Я пытаюсь сделать так, чтобы слова переносились целиком, а не по частям. Например, текст «пылесосный пылесосательный пылесос» должен вывести всего первых два слова, а последнее перенести. Вместо этого выходить что-то типа «пылесосный пылесосательный пыл <перенос> есос».

Вот код, который не делает, что мне надо :С

<pre> </pre>
  • html
  • css
  • css3

5

По умолчанию именно так и работает — перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в word-break.
Помимо этого, исправить можно одним из следующих способов:

pre {
  white-space: pre-wrap;
  overflow: auto;
  border: 1px dotted red;
  width: 32ch;
  float: left;
  margin: .5em;
  min-height: 7em;
}

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

.cancel {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.to-normal {
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
}

pre:before {
  content: attr(class) "\A0\A";
  color: blue;
}
<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

2

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

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

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

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

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

Почта

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

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

Почта

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

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

html — Как включить автоматический перенос слов по слогам?

У меня есть файлы html и css, чтобы показать мою книгу в моем приложении. И этот код:

let headerString = "<meta name=\"viewport\" content=\"initial-scale=1.1\" />"
do {
            guard let filePath = Bundle.main.path(forResource: "\(readBookNumber)", ofType: "html")
                else {
                    print ("File reading error")
                    return
                }
            var content =  try String(contentsOfFile: filePath, encoding: .utf8)
            let baseUrl = URL(fileURLWithPath: filePath)
            
            content.changeHtmlStyle(font: "Iowan-Old-Style", fontSize:  UserDefaults.standard.integer(forKey: "textSize"), fontColor: textColor)
            webView.loadHTMLString(headerString+content, baseURL: baseUrl)
        }
        catch {
            print ("File HTML error")
        }

Как включить автоматический перенос слов по слогам?

Что у меня есть:

In June 2010 at
the World Wide

Developers Conference
Apple
announced version
4 of Xcode
during the Developer
Tools State
of the Union address.

Что я хочу:

In June 2010 at
the World Wide
Developers Con-
ference, Apple
announced ver-
sion 4 of Xcode
during the Devel-
oper Tools State
of the Union ad-
dress.

  • html
  • css
  • ios
  • swift

1

С помощью css + html можно сделать перенос

  • word-wrap: break-word;
    по словам + знаку переноса (-)
  • word-break: break-all; жесткий перенос по буквам
div {
  width: 150px; 
  border: 1px solid #000000;
}
div.a {
  word-wrap: break-word;
}
div.b {
  word-break: break-all;
  white-space: normal;
}
<h3>По словамp: break-word:</h3>
<div> This div contains a very-very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. </div>
<h3>По буквам: break-all:</h3>
<div> This div contains a very-very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

Для остального понадобиться js

UPD Переносы слов

&shy; — выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис

hyphens — сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка.

На данный момент действительны следующие значения:

  • Android / Mac: manual | none | auto
  • Другие платформы: manual | none

Источник

2

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

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

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

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

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

Почта

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

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

Почта

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

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

Свойство режима записи CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Укажите расположение строк текста горизонтально или вертикально:

p.

test1 {
 режим письма: горизонтальный-tb;
}

п.тест2 {
режим письма: вертикальный-rl;
}

span.test2 {
  режим записи: вертикальный-рл;
}

Попробуйте сами »

Определение и использование

Свойство write-mode указывает, будут ли строки текста располагаться горизонтально или вертикально.

Показать демо ❯

Значение по умолчанию: горизонтальный-tb
Унаследовано: да
Анимация: нет. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.writingMode=»vertical-rl»

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
режим записи 48,0 12,0 41,0 11,0 35,0

Синтаксис CSS

режим письма: горизонтальный-tb|вертикальный-rl|вертикальный-lr;

Значения свойств

Значение Описание Демо
горизонтальный Пусть содержимое течет горизонтально слева направо, вертикально от сверху вниз Демонстрация ❯
вертикально-правый Пусть содержимое течет вертикально сверху вниз, горизонтально от справа налево Демонстрация ❯
вертикально-левый Пусть содержимое течет вертикально сверху вниз, горизонтально от слева направо Демонстрация ❯

Связанные страницы

Учебник CSS: текстовые эффекты CSS

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

9002 FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — Есть ли способ переноса длинных слов в div?

спросил

Изменено 3 месяца назад

Просмотрено 303 тыс. раз

Я знаю, что в Internet Explorer есть стиль переноса слов, но я хотел бы знать, существует ли межбраузерный метод переноса текста в div.

Предпочтительно CSS, но фрагменты JavaScript тоже подойдут.

Я имею в виду длинные строки.

  • css
  • html
  • перенос слов

1

Читая первоначальный комментарий, Резерфорд ищет кросс-браузерный способ переноса неразрывного текста (подразумевается его использованием переноса слов для IE, предназначенного для разрыва неразрывных строк).

 /* Источник: http://snipplr.com/view/10979/css-кросс-браузерный-перенос слов */
.перенос слова {
   пробел: предварительная обертка; /* CSS3 */
   пробел: -moz-pre-wrap; /* Fire Fox */
   пробел: -предварительная обертка; /* Опера <7 */
   пробел: -o-pre-wrap; /* Опера 7 */
   перенос слов: прерывание слова; /* IE */
}

Я уже некоторое время пользуюсь этим классом, и он прекрасно работает. (примечание: я тестировал только в FireFox и IE)

3

Большая часть предыдущего ответа не работала у меня в Firefox 38.0.5. Это сделало...

 <дел>
    // Контент идет сюда

Документация:

  • разрыв слова
  • перенос слов

1

 пробел: предварительная обертка

quirksmode.org/css/whitespace.html

1

Решение Аарона Беннета отлично работает для меня, но мне пришлось удалить эту строку из его кода --> пробел: -pre-wrap; , потому что он выдавал ошибку, поэтому окончательный рабочий код выглядит следующим образом:

 . wordwrap {
   пробел: предварительная обертка; /* CSS3 */
   пробел: -moz-pre-wrap; /* Fire Fox */
   пробел: -o-pre-wrap; /* Опера 7 */
   перенос слов: прерывание слова; /* IE */
}

большое спасибо

3

Как упоминает Дэвид, DIV по умолчанию выполняет перенос слов .

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

 thisIsAreallyLongStringThatIWantToBreakToFitInsideAGivenSpace

Это не точно, так как есть проблемы с размером шрифта и тому подобное. Опция span работает, если контейнер имеет переменный размер. Если это контейнер с фиксированной шириной, вы можете просто вставить разрывы строк.

2

Вы можете попробовать указать ширину для div, будь то в пикселях, процентах или ems, и в этот момент div сохранит эту ширину, а текст будет автоматически переноситься внутри div.

No related posts.