鍍金池/ 問(wèn)答/iOS  HTML/ 怎樣讓html元素總是能包裹所有元素？

怎樣讓html元素總是能包裹所有元素？

html元素的寬度雖然是100%，但是當(dāng)內(nèi)容超過(guò)瀏覽器寬度出現(xiàn)滾動(dòng)條時(shí)，把滾動(dòng)條拉向右側(cè)，總是發(fā)現(xiàn)元素會(huì)超出html元素的寬度。怎樣讓html始終包圍所有元素？

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      html {
          border: 1px solid black;
          width: 100%;
      }
  </style>
</head>
<body>
    lkjlaksjfklajfkalsdddddddaaaadfajflkajflkajflkajflkjasklfjaslkfjaklsjfklasjfklasjfaklsfsd
</body>

</html>

圖片描述

回答
編輯回答
空痕

css3

html {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border: 1px solid black;
}
2017年4月13日 15:16
編輯回答
玄鳥(niǎo)

word-wrap: break-word; 自動(dòng)換行。

2017年12月20日 07:29
編輯回答
嘟尛嘴

你這個(gè)不就是英文太長(zhǎng)沒(méi)有自動(dòng)換行?加個(gè)css word-wrap:break-word

2017年1月17日 14:03
編輯回答
瘋浪

你這個(gè)瀏覽器是默認(rèn)為只有一個(gè)單詞，你在你亂輸?shù)膯卧~中加些空格啊什么的在試試呢？

2017年5月9日 16:42
編輯回答
執(zhí)念

你這完全是對(duì)html不了解。width: 100%只是針對(duì)瀏覽器寬度的。

你說(shuō)的這個(gè)功能一般稱作wrap_content，也就是parent 始終包裹著內(nèi)容。

然后很抱歉的告訴你，html目前應(yīng)該是不支持這個(gè)功能的，我們一般通過(guò)內(nèi)容的展示形式來(lái)修復(fù)此些功能。比如，換行，或者overflow: hidden.

當(dāng)然你非要實(shí)現(xiàn)的話，也有比較hack的方式,通過(guò)js來(lái)計(jì)算寬度，然后設(shè)置給html，不過(guò)不建議使用，這種方式會(huì)引發(fā)reflow。

2017年11月13日 07:26
編輯回答
司令

改overflow

2017年4月27日 01:09