Question

我有一个包含多个<p>元素的<span>元素，我试图在容器包装的任何地方添加换行符。但是，它目前在跨度上打破。

视觉示例：

Lorem Ipsum Dolor | Sit amet | conseceteuerblabla |

我努力实现的目标：

Lorem Ipsum Dolor Si| t amet conseceteuerb| labla |

如何使用相同的标记来实现这一目标？

我的代码：

＆＃13;

p {
  font-family: monospace;
  font-size: calc(2em + 3vw);
  
  word-break: break-word;
}

span {
  word-break: break-word;
}

＆＃13;

<p>
  <span>Lorem</span>
  <span>Ipsum</span>
  <span>Dolor</span>
  <span>Sit</span>
  <span>azerty</span>
  <span>qwerty</span>
  <span>asdfghjk</span>
  <span>qwertyuiopasdfghjkl</span>
</p>

＆＃13;

Answer 1

break-word不是word-break的有效值。您必须使用break-all

＆＃13;

    p {
      font-family: monospace;
      font-size: calc(2em + 3vw);
      
      word-break: break-all;
    }

    span {
      word-break: break-all;
    }

＆＃13;

    <p>
      <span>Loremloremlorem</span>
      <span>Ipsumipsumipsumipsm</span>
      <span>Dolordolordolordolordolordolor</span>
      <span>Sitsitsitsitsitsitsit</span>
      <span>asdasdasdsadasdasdasdasdasd</span>
      <span>qweqweqweqw</span>
      <span>zxc</span>
      <span>tyutyutyutyutyutyutyutyu</span>
    </p>

＆＃13;

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Answer 2

你可以使用

P{ word-break: break-all; }

而不是word-break：break-word;

在句子HTML / CSS中任何给定字符的换行符

2 个答案: