Блог

Главная - Вопросы по программированию - Возможно ли, чтобы несколько контейнеров по-разному влияли на перенос слов?

Возможно ли, чтобы несколько контейнеров по-разному влияли на перенос слов?

#html #css #word-wrap

#HTML #css #перенос слов

Вопрос:

У меня есть контейнер, который содержит контейнер, содержащий текст, такой как

 <div id="outer">
  <div id="inner">
    <p>Text</p>
  </div>
</div>

а внутренний контейнер центрирован во внешнем и меньше его

 #inner {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

Возможно ли реализовать подобное правило переноса слов?

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

Иллюстрация:

 ┌───────────────────────────┐
│        ┌─────────┐        │
│        │A sentence        │
│        │that goes│        │
│        │over the bounds   │
│        │of the inner      │
│        │container│        │
│        │But if we│        │
│        │have a word       │
│        │that's far        │
│        │too long,│        │
│        │such as  │        │
│        │Antidisestablishme│
│        │ntarianism,       │
│        │it's broken       │
│        │apart.   │        │
│        └─────────┘        │
└───────────────────────────┘

Я пытался сделать это так:

 #outer {
  overflow-wrap: break-word;
}

#inner {
  overflow-wrap: normal;
}

но это не работает.

Комментарии:

1. По вашим собственным правилам «A» и «предложение» не должны быть в отдельных строках? Я думаю, может быть, вы просто хотите ограничить его 1 словом, выходящим за пределы внутренних границ?

2. Нет. Я хочу, чтобы слово, которое начинается слева от внутренней границы и заканчивалось слева от внешней границы, прерывалось после него, а не на нем или перед ним

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

4. Есть ли способ сделать это с помощью CSS?

5. Важно ли, чтобы внутренний элемент был меньше? Не могли бы вы просто выровнять его по правому краю с заданной шириной? Таким образом, при достижении правой границы внешнего контейнера произойдет разрыв строки.