怎样让这个文字随着浏览器宽度自动换行?

发布于 2022-09-02 14:31:31 字数 1648 浏览 9 评论 0

如果li里面的字很长时屏幕缩到最小时会撑开滚动条 宽度还是原来那样 想让它随便浏览器宽度自动换行 并且去掉这个滚动条 这个应该怎么办呢 我加了word-wrap也不管用
图片描述

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>主页</title>
   <link href="bootstrap.css" rel="stylesheet">
   <script src="jquery.min.js"></script>
   <script src="bootstrap.js"></script>
   <style type="text/css">
   body,div,ul,li,a,form{margin: 0;padding: 0;}
   li{list-style: none;}
   #container div{text-align: center;}
   #middle ul li{display: inline-block;width: 100%;height: 40px;line-height: 40px;word-wrap;}
   #middle ul li a{width: 100%;display: inline-block;text-align: center;text-decoration: none;word-wrap;}
   #main{margin-top: -20px;}
   
   </style>
   <script type="text/javascript">
     
   </script>
</head>
<body>
<div class="container">
  <div class="row" id="main">
  <div  class="col-sm-1 col-md-1 col-lg-1" id="left">
  </div>

  <div class="col-sm-8 col-md-8 col-lg-8" id="middle">
    <ul >
    <hr>
    <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
    <hr>
   </ul>
  </div>

  <div class="col-sm-3 col-md-3 col-lg-3" id="right">  
  </div>
</div>

</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

缱绻入梦 2022-09-09 14:31:32

css word-break word-wrap white-space

li {
  word-break: break-all;
  word-wrap: break-word;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文