主页 / 问题 / 668676
Accepted
perfect
Asked:2020-05-21 13:09:14 +0000 UTC2020-05-21 13:09:14 +0000 UTC

在固定宽度的框中包裹连续的文本行

  • 772

代码示例：

div {
  width: 60px;
  background-color: red;
}
<div>xxxxxxxxxxxxxxxxxxxx</div>

如您所见，文本超出了块，因为它是连续的，您需要在不增加块宽度的情况下将其放入 DIV（换行）。您只能增加块的高度。我怎样才能做到这一点？

html

1 个回答

  1. Best Answer

    使用连字符&shy;：

    &shy;- 如有必要，在您指定的地方打断单词并添加连字符

    div {
  width: 60px;
  background-color: red;
}
    <div>xxx&shy;xxx&shy;xxx&shy;xxx&shy;xxx&shy;xxx</div>

    使用自动换行标签<wbr>：

    <wbr>- 相同，但没有连字符

    div {
  width: 60px;
  background-color: red;
}
    <div>xxx<wbr>xxx<wbr>xxx<wbr>xxx<wbr>xxx<wbr>xxx</div>

    使用属性word-wrap：

    word-wrap: break-word;- 在不考虑语法的情况下打断单词

    div {
  width: 60px;
  background-color: red;
  word-wrap: break-word;
}
    <div>xxxxxxxxxxxxxxxxxxxx</div>

    使用属性hyphens：

    hyphens从理论上讲，考虑到语法，它应该自动确定在哪里放置连字符，但到目前为止浏览器对它的支持很差。

    div {
  width: 60px;
  background-color: red;
  word-wrap: break-word;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
    <div>xxxxxxxxxxxxxxxxxxxx</div>

    • 3

相关问题