HTML使用DIV+css实现展开全文的功能

最新推荐文章于 2024-08-22 11:20:46 发布

Micky米

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量7.8k

点赞数 1

分类专栏： java android

本文链接：https://blog.csdn.net/JJMM2009/article/details/72358201

版权

本文介绍如何在HTML中使用DIV和CSS来创建展开全文的功能，以解决手机APP中长内容遮挡底部评论区的问题。通过示例代码，展示了如何在webview加载的HTML页面中应用此技术。

摘要由CSDN通过智能技术生成

手机app展示图文内容太长，导致底部评论等功能需要下拉到最底部才能看到，影响用户使用，所以用webview加载html页面，实现了展开全文的功能。直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文展开</title>
<style>
#myarticle{
width:700px;
height:300px;
overflow-y:hidden;
border:1px solid green;
margin:20px auto;
}
p{
text-indent: 2em;
margin-bottom: 10px;
}
button{
width:700px;
margin:10px auto;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="myarticle">
<p>横道河子镇是牡丹江  通往哈尔滨  的咽喉要道，301国道  和缤绥铁路穿越全境，距省会哈尔滨253公里，距牡丹江市45公里，距绥芬河口岸  210公里，距海林市33公里，距国际航空港牡丹江机场  54公里，交通十分发达。横道河子镇行政区总面积为794平方公里，城镇规划  区面积为7.85平方公里。镇内有2个社区，辖6个行政村，总人口32000人。
该镇有着悠久的历史与文化脉络，由于1897年中东铁路  的修建而使其得以发展，自沙俄  经营