问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎样让html元素总是能包裹所有元素？

头像
Avery
    901217

    html元素的宽度虽然是100%，但是当内容超过浏览器宽度出现滚动条时，把滚动条拉向右侧，总是发现元素会超出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>

    图片描述

    htmlcssjavascript前端
    阅读 3.8k
    6 个回答
    得票最新
    头像
    李十三
      13.6k31929
      ✓ 已被采纳

      css3

      html {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border: 1px solid black;
}
      头像
      Saihy
        3517

        你这个不就是英文太长没有自动换行?加个css word-wrap:break-word

        头像
        已注销
          4801512

          改overflow

          头像
          zhiwei
            1.4k1717

            你这完全是对html不了解。width: 100%只是针对浏览器宽度的。

            你说的这个功能一般称作wrap_content，也就是parent 始终包裹着内容。

            然后很抱歉的告诉你，html目前应该是不支持这个功能的，我们一般通过内容的展示形式来修复此些功能。比如，换行，或者overflow: hidden.

            当然你非要实现的话，也有比较hack的方式,通过js来计算宽度，然后设置给html，不过不建议使用，这种方式会引发reflow。

            头像
            安好
              12412136

              word-wrap: break-word; 自动换行。

              头像
              青色的风
                1526

                你这个浏览器是默认为只有一个单词，你在你乱输的单词中加些空格啊什么的在试试呢？

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题