Как сделать перенос слов текса правильно?

Question

[Now159]

export default {
  name: 'symbols',
  data: () => ({}),

  methods: {
    wordWrap(text) {
      const regex =
        /[бвгджзйклмнпрстфхцчшщ]+[аеёиоуыэюя][бвгджзйклмнпрстфхцчшщ](?=[бвгджзйклмнпрстфхцчшщьъ ])[ьъй]?|[бвгджзйклмнпрстфхцчшщ]+[аеёиоуыэюя][й]?|[аеёиоуыэюя][бвгджзйклмнпрстфхцчшщ](?=[бвгджзйклмнпрстфхцчшщьъ ])[ъь]?|[аеёиоуыэюя](?=[а-я]{2})|(?<= +)[^\s]+(?= +|$)/gmi
      let out = '', offset = 0, prev = 0, pass = false
      let matches = text.matchAll(regex)
      for (const m of matches) {

        let hyphen = text[prev - 1] == ' ' ? '' : `-`
        out += text.substring(offset, prev) + hyphen + '\n'
        offset = prev

        if (!pass) prev = m.index
        pass = m[0].length < 2
      }
      out += text.substring(offset)
      return out
    },
  },
}

Всем привет, нужно реализовать в тексте перенос слова по слогам если не хватает ширины контейнера. Желательно максимально грамотный перенос, функция которую я демонстрирую, принципе устраивает, но появляются (-) и лишнии пробелы в слогах. Помогите пожалуйста разобраться, ну или может другой вариант предложите, буду благодарен

Comments

[RAX7]

https://github.com/Nufeen/typo
https://github.com/ytiurin/hyphen

Answer 1

[Антон Антон]

.container {
  hyphens: auto
}

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

Comments

[Now159]

это прекрасно но это работает только для FF, и только для слов с очевидным переносом, в таком слове как Фотолюминесцентные, перенос не делается

[Антон Антон]

работает только для FF

@Now159, https://caniuse.com/?search=hyphens

но если очень хочется - то можно вставить ­ в места, выделяемые регуляркой через replace (тут надо выделить группы в исходной регулярке и их подстановку в выражении замены)

const result = 'Дятел долбил сосну'.replace(/(долбил)/gm, 'про$1');

и переключить hyphens в manual (или не переключать, тогда в дополнение к добавленным переносам будут еще и автоматические). Но об этом я тоже написал в ответе.