Перенос css слова: word-wrap | htmlbook.ru

Leave a Comment / Css / By /

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как в CSS переносить очень длинное слово по буквам на новую строку?

Вопрос задан

Изменён 1 год 4 месяца назад

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

Есть блок с текстом, в котором есть длинное слово.

Как с помощью CSS перенести это слово побуквенно на новую строку, чтобы слово не выходило за пределы блока?

2

В стилях для переноса сток используй word-wrap: break-word;

Используйте свойство word-break, есть несколько свойств, по ссылке есть примеры и описание.

ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}
ul li {
  word-break: break-all;
}
<ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

Чтобы перенос был по буквам, используйте word-break: break-all;

Так же можно ограничить текст, обрезав «вылезающий» текст и визуально (через троеточие) пометить «продолжение текста», при помощи свойства text-overflow.

ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}
ul li {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

С помощью widht: цифра; Например:

p{
   width: 300px; /*То есть строка будет до 300 пикселей*/
}

Или

<p>
</p>

Также можно с помощью <wbr> — переносит на новую строку. Почитайте подробнее Здесь

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Обтекание и разрыв текста — CSS: каскадные таблицы стилей

В этом руководстве объясняются различные способы управления переполнением текста в CSS.

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

CSS отобразит переполнение таким образом, потому что выполнение чего-либо еще может привести к потере данных. В CSS потеря данных означает, что часть вашего контента исчезает. Таким образом, начальное значение

overflow это visible , и мы можем видеть переполняющий текст. Как правило, лучше иметь возможность видеть переполнение, даже если оно грязное. Если что-то исчезнет или будет обрезано, как если бы переполнение было установлено на скрытое , вы могли бы не заметить этого при предварительном просмотре своего сайта. Беспорядочное переполнение, по крайней мере, легко заметить, а в худшем случае ваш посетитель сможет увидеть и прочитать контент, даже если он выглядит немного странно.

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

Чтобы найти минимальный размер блока, который будет содержать его содержимое без переполнения, установите для свойства блока

width или inline-size значение min-content .

Таким образом, использование min-content является одной из возможностей переполнения ящиков. Если можно позволить окну увеличиться до минимального размера, необходимого для содержимого, но не больше, использование этого ключевого слова даст вам этот размер.

Если блок должен иметь фиксированный размер или вы хотите, чтобы длинные слова не переполнялись, то вам может помочь свойство overflow-wrap . Это свойство разбивает слово, если оно слишком длинное и не помещается в строке само по себе.

Примечание: Свойство overflow-wrap действует так же, как нестандартное свойство word-wrap . Свойство word-wrap теперь рассматривается браузерами как псевдоним стандартного свойства.

Альтернативное свойство, которое можно попробовать, это word-break . Это свойство разбивает слово в точке его переполнения. Это приведет к безубыточности, если размещение слова на новой строке позволит отобразить его без разрыва.

В следующем примере вы можете сравнить разницу между двумя свойствами одной и той же текстовой строки.

Это может быть полезно, если вы хотите предотвратить появление большого пробела, если для строки достаточно места. Или там, где есть другой элемент, после которого вы не хотели бы, чтобы произошел разрыв.

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

Чтобы добавить дефисы, когда слова разбиты, используйте свойство CSS

hyphens . Используя значение auto , браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Чтобы иметь некоторый контроль над процессом, используйте значение manual , затем вставьте в строку символ жесткого или мягкого разрыва. Жесткий разрыв ( ‐ ) всегда прерывается, даже если в этом нет необходимости. Мягкий разрыв ( ­ ) прерывается только в том случае, если разрыв необходим.

Вы также можете использовать свойство hyphenate-character , чтобы использовать строку по вашему выбору вместо символа дефиса в конце строки (перед переносом строки).

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

Если вы знаете, где должна прерываться длинная строка, то также можно вставить элемент HTML . Это может быть полезно в таких случаях, как отображение длинного URL-адреса на странице. Затем вы можете добавить это свойство, чтобы разорвать строку в разумных местах, что облегчит чтение.

В приведенном ниже примере текст прерывается на месте .

  • Элемент HTML
  • Свойство CSS word break
  • Свойство CSS overflow-wrap
  • Свойство CSS white-space
  • Свойство CSS дефисов
  • Переполнение и потеря данных в CSS

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.
Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

CSS word-wrap Property — GeeksforGeeks

Улучшить статью

Сохранить статью

Нравится Статья

sarthak_ishu11

ученый

483 опубликованных статьи

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

    Свойство word-wrap в CSS используется для разрыва длинных слов и переноса их на следующую строку. Он определяет, следует ли разбивать слова, когда содержимое выходит за границы своего контейнера.

      

    Синтаксис: 

     word-wrap: normal|break-word|initial|inherit;

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

    • нормальный: Это значение по умолчанию. Линии могут разрываться только в обычных точках разрыва (пробелы, не буквенно-цифровые символы и т. д. ).
    • break-word : Слова, превышающие ширину контейнера, будут произвольно разбиты, чтобы соответствовать границам контейнера.
    • начальный : Используется для установки свойства переноса слов в значение по умолчанию.
    • наследовать : Это свойство наследуется от своего родителя.

    Пример: В этом примере мы используем word-wrap: normal ; свойство.

    html

    < html >

        

    < головка 900 08 >

         < название >

             слово -обернуть свойство

         название >

     

         < 90 008 стиль >

             div {

                 перенос слов: обычный;

                 ширина: 150 пикселей;

                 граница: 1 пиксель сплошной черный;

             }

         стиль >

    головка >

     

    < тело >

         < раздел >

             GeeksforGeeks:AComputerSciencePortalForGeeks

         div >

    корпус >

    Вывод:

      

    Пример: В этом примере мы используем свойство word-wrap: break-word.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *