Question

我的问题很长：我的话开箱即用。有没有任何解决方案，所以如果我有这个词lksadlkasdjlaksdjasdasjdklsajdlaskdaskldjasdkladja，表现得像这样lksadlkasdjlaksdjasdasjdk- NEXT ROW-＆gt; jdlaskdaskldjasdkladja

有什么建议吗？

Answer 1

您可以使用word-wrap: break-word;打破长字符串。

span{
  border:1px solid red;
  width:50px;
  height:50px;
  display:block;
  word-wrap: break-word;
  overflow: hidden;
}

<span>jhfhgfhfghdfghdgfdfgdfgdfgdgfdghdgfdgfdgfdgfcgfvchgchvhvhgvchghg</span>

Answer 2

如果您知道*哪里*您想要分割单词，您可以使用＆＃34;软连字符＆＃34;：将此代码插入所需位置：

如果容器足够宽，单词将显示为一个，如果没有，它将在软连字符处中断：

＆＃13;

.a {
width: 200px;
border: 1px solid #ddd;
}

.b {
width: 400px;
border: 1px solid #ddd;
}

＆＃13;

<p class="a">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>
<p class="b">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>

＆＃13;

注意：有word-wrap: break-word;，但它也会破坏较短的单词。

Answer 3

您可以使用css word-break或overflow-wrap来完成此操作。并添加css hyphens以表明读者的休息时间。

<强>溢出缠绕： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

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

注意：与word-break相比，overflow-wrap只会在整个单词不能放在自己的行上而不会溢出的情况下创建一个中断。

<强>连字符： https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

以下两个例子：

span {
  background: #eee;
  width:150px;
  height:auto;
  display:block;
  margin-bottom: 1rem;
}

span:nth-child(1){
  word-wrap: break-word;
  hyphens: auto;
}

span:nth-child(2){
  overflow-wrap: break-word;
  hyphens: auto;
}

<span>abcdefghijklmnopqrstuvwxyz</span>
<span>abcdefghijklmnopqrstuvwxyz</span>

如何强制文本在下一行中断？

3 个答案: