1

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

1
  • css вроде как позволяет переносить только слова целиком, разделять на слога он не умеет (word-wrap, word-break)
    – Zhihar
    Commented 7 окт. 2020 в 13:51

1 ответ 1

2

С помощью 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 Переносы слов

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

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

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

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

Источник

2
  • Ну это не совсем то, что мне нужно. По слогам слова не переносятся. Я не разбираюсь в css и html, но нашел этот код hyphens:auto; text-align:justify; -webkit-hyphens:auto; -webkit-hyphenate-character:"\2010"; -webkit-hyphenate-limit-after:1; -webkit-hyphenate-limit-before:3; -moz-hyphens:auto; Он по слогам практически правильно все разделяет, но иногда между но не всегда. Иногда большие пробелы оставляет между словами, хотя там можно бы разделить по слогам. Что в нем не так?
    – User
    Commented 7 окт. 2020 в 15:19
  • 1
    @User, у меня на винде hyphens не отображается, не с оперы не с хрома, но большие пробелы у вас скорее всего из-за text-align:justify
    – Tiarait
    Commented 7 окт. 2020 в 16:52

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.