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

Question

У меня есть файлы 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.

Answer 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;
}

<h2>По словамp: break-word:</h2>
<div class="a"> This div contains a very-very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

<h2>По буквам: break-all:</h2>
<div class="b"> This div contains a very-very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

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

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

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

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

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

Android / Mac: manual | none | auto

Другие платформы: manual | none

Источник

БЛОГ НА HUSL

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

Ответы (1 шт):