主页 / 问题 / 1517953
Accepted
powerg
Asked:2023-05-06 06:45:27 +0000 UTC2023-05-06 06:45:27 +0000 UTC

如何将一段文本移动到块结构中的另一行？

  • 772

你能告诉我是否可以像这样移动文本吗？

在此处输入图像描述

这样的转移甚至可能吗？我只能按块实施传输：

.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>

html

1 个回答

  1. Best Answer

    设置列表的元素display: inline使其表现得像字符串并在空白字符上换行就足够了。

    （写属性更仔细：错的——text-dec A ration，对的——text-dec O ration，）

    .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>

    • 3

相关问题