<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>,这仅在必要时应用.

HTML中的软连字符(<wbr> vs.­)

第六是word-wrap:break-word;.这告诉浏览器它可以打破任何两个字母之间的长字.这是一个更好的选择,word-break因为它告诉浏览器在任何两个字母之间断开而不限于长字.(事实上​​,这两者是分开的东西,这让我疯狂.)

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