如果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>css word-break word-wrap white-space
li {
word-break: break-all;
word-wrap: break-word;
}