如何使 div 垂直而不是水平溢出？答案

【问题标题】：How to make a div overflow vertically instead of horizontally?如何使 div 垂直而不是水平溢出？
【发布时间】：2017-07-30 01:54:57
【问题描述】：

我有一个网页的一小部分将包含一个大文本，我希望它垂直扩展而不是水平扩展，我知道可以使用溢出：可见|隐藏|滚动|自动|初始|继承；水平和垂直都使用overflow-x和overflow-y，但这并不能解决我的问题，因为它们要么隐藏文本，要么放置一个滚动条，我希望该div能够垂直占据他想要的所有空间，但只占据空间他有水平的，在移动设备上是半屏。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div width="50%" style="background-color:red">
        asdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div>
</body>
</html>

文本将来自数据库，所以我不能用换行符或段落来打破它，任何人都可以帮助我吗？

【问题讨论】：

标签： html css

【解决方案1】：

使用word-break: break-all;分断文本：

.container {
  word-break: break-all;
  overflow: auto;
  width: 50vw;
  height: 50vh;
  background-color:red;
}

<div class="container">
 asdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>

【讨论】：

【解决方案2】：

overflow-y:scroll;

这样就可以了

【讨论】：