<li>标签内的文字出现在屏幕外

Question

我在<li>标记中有一些长文本，当屏幕很窄时，它会离开屏幕。

我试图用width: 100%;来解决这个问题，但没有任何反应。此外，文本不应具有固定宽度，必须具有响应性。

这是我的代码结构：

<div class="absolute-pos inline-block">
  <li>
      <div>
      <span>
          some really really loooonnnnggg teeeeeexxxxttttt hheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrreeeee
      </span>
      </div>
  </li>
</div>

.absolute-pos {
  position: absolute;
}
.inline-block {
  display: inline-block;
}

jsfiddle：https://jsfiddle.net/xLm5hL3w/

Answer 1

您有几种选择。这是我想到的第一个：

第一个是width:100%; overflow:hidden;。这将“剪辑”超出页面边缘的任何文本。

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

第二个是word-break:break-all;。这允许您的文本换行到任意两个字母之间的新行。

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

第三个 - 以及我建议的 - 是<wbr>标签。这告诉浏览器“允许”在长词中放置中断。如果不需要打破单词那么它就不会像<br>或空格字符那样破坏。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

第四个是text-overflow属性。这使您可以更加细致地控制文本在文本太长时显示的方式，但不会影响包装。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

第五个是­特殊字符。这告诉浏览器它可以使用连字符打破一个单词并将其包装到下一行。与<wbr>类似，仅在必要时应用此功能。

Soft hyphen in HTML (<wbr> vs. &shy;)

第六个是word-wrap:break-word;。这告诉浏览器它可以打破任何两个字母之间的长字。这是比word-break更好的选择，因为它告诉浏览器在任何两个字母之间断开而不限于长字。 （事实上​​，这两者是分开的事情，这让我感到疯狂。）

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