html - 如果定义了它的高度,如何调整 div 上的文本?

标签 html css

如果定义了高度,如何调整 div 上的文本?

div {
    height: 200px;
    padding:15px;
    border:1px solid red;
    overflow:hidden;
}

p {
    font-size:16px;
    margin-bottom:10px;
    line-height:16px;
}
<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

文本在底部被切掉一半,如何管理框来解决它 谢谢

最佳答案

div {

height: 200px;
padding:15px;
border:1px solid red;
overflow:hidden;
overflow-y: scroll
}
p {
font-size:16px;
margin-bottom:10px;
line-height:16px;
}
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a</p> <p> type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

关于html - 如果定义了它的高度,如何调整 div 上的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43581675/

相关文章:

css - 尝试制作一个在悬停时增长的 CSS 按钮,文本保持相同大小

javascript - 选择一个选项后取消突出显示下拉菜单

php - CSS 自定义字体在 Web 主机中显示不正确,但在本地主机中显示不正确

html - 子元素悬停,影响父元素

html - 为什么 Firefox 有时会缓存我的 CSS 和 Javascript 代码,即使它已经更改?

css - 自定义工具提示

html - 如何设置滚动条永远可见?

javascript - 基于按钮显示图像

html - 在 html 页面中使用 Ajax 加载 Google Chart Api

javascript - 单击按钮时移动的 HTML 水平菜单