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

Рейтинг: 1Ответов: 1Опубликовано: 06.05.2023

Подскажите можно ли перенести текст вот так?

введите сюда описание изображения

Такой перенос вообще возможен? Смог реализовать только перенос по блокам:

.breadcrambs__content ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  max-width: 347px;
}

.breadcrambs__content li {}

.breadcrambs__content li span {
  font-weight: 400;
  font-size: 12px;
  transition: all 0.3s ease 0s;
  word-break: break-all;
  text-decaration: none;
  color: #111111;
}

.breadcrambs__content li a {
  font-weight: 400;
  font-size: 12px;
  transition: all 0.3s ease 0s;
  word-break: break-all;
  text-decaration: none;
  color: #111111;
}

.breadcrambs__content a span {
  text-decaration: none;
  margin: 0px 10px 0px 10px;
}
<div class="breadcrambs">
  <div class="breadcrambs__container">
    <div class="breadcrambs__content">
      <ul>
        <li><a href="#">Главная<span>/</span></a></li>
        <li><a href="#">Каталог товаров<span>/</span></a></li>
        <li><a href="#">Спецодежда<span>/</span></a></li>
        <li><a href="#">Спецодежда летняя<span>/</span></a></li>
        <li><span>Костюм летний “СИРИУС-ВОЛОГДА”, Куртка, брюки</span></li>
      </ul>
    </div>
  </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Достаточно задать элементам списка display: inline, чтобы он вёл себя, как строка и переносился по пробельным символам.

(Внимательнее прописывайте свойства: неправильно - text-decAration, правильно - text-decOration,)

.breadcrambs__content ul {
  list-style: none;
  max-width: 347px;
}

.breadcrambs__content li {
  display: inline;}

.breadcrambs__content li span {
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  color: #111111;
  transition: all 0.3s ease 0s;
}

.breadcrambs__content li a {
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  color: #111111;
  transition: all 0.3s ease 0s;
}
.breadcrambs__content li a:hover {
  color: #f00;
}

.breadcrambs__content a span {
  text-decoration: none;
  margin: 0 10px;
}
<div class="breadcrambs">
  <div class="breadcrambs__container">
    <div class="breadcrambs__content">
      <ul>
        <li><a href="#">Главная<span>/</span></a></li>
        <li><a href="#">Каталог товаров<span>/</span></a></li>
        <li><a href="#">Спецодежда<span>/</span></a></li>
        <li><a href="#">Спецодежда летняя<span>/</span></a></li>
        <li><span>Костюм летний “СИРИУС-ВОЛОГДА”, Куртка, брюки</span></li>
      </ul>
    </div>
  </div>
</div>