2017-07-29 202 views
0

我有一个网页的一小部分,将包含一个大文本,我希望它能够垂直扩展而不是水平扩展,我知道可以使用overflow:visible | hidden | scroll | auto | initial | inherit;无论是水平和垂直溢出x和溢出y,但这并不能解决我的问题,因为他们要么隐藏文本或放置一个滚动条,我希望该div所需的所有空间,他想垂直但只有空间他是水平的,这是移动设备上的一半屏幕。如何使垂直而不是水平垂直溢出?

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

文本将来自数据库,所以我不能换行或段落打破它,任何人都可以帮我?

回答

2

使用word-break: break-all;符文:

.container { 
 
    word-break: break-all; 
 
    overflow: auto; 
 
    width: 50vw; 
 
    height: 50vh; 
 
    background-color:red; 
 
}
<div class="container"> 
 
asdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssasdssssssssssssssssssssssssssssssssssdddddfsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
 
</div>

0
overflow-y:scroll; 

这将做