做项目时,会遇到一些零碎的技术点。记录下来以防忘记

需求:图中圈中的部门是滚动的。不修改父级样式

代码:

<div class="right-text-bottom">
<div class="right-text-p">有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,
26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生 密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生
密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,
26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生 密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生
密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,
26个民族和谐共处,相生有一个美丽的地方,各族人民在这里生长。密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生 密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生
密密的寨子紧紧相连,那弯弯的江水日夜流淌……”这里,26个民族和谐共处,相生
</div>
<!-- <div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
...
</div> -->
</div>
.right-text-bottom {
width: %;
height: %;
overflow: hidden;
/* border: 1px dashed red; */
}
.right-text-p {
padding: % %;
text-align: left;
line-height: .4em;
font-size: .3em;
color: #;
text-indent: 2em;
white-space: pre-wrap;
height: %;
width: calc(% + 1em);
overflow: auto;
}

有不同的观点或者实现方式。欢迎在评论区告诉我。

css 在一定区域内滚动显示,不修改父级样式的更多相关文章

  1. css文本内容大于内本显示框设置其显示方式

    1. <style type="text/css"> .text-ellipsis{ overflow: hidden;//隐藏滚动条 white-space: now ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  4. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  5. 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  6. 同一标签内多个css规则在页面中如何显示?

    这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...

  7. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  8. css样式-区域内文字不会被选中

    要注意浏览器的兼容性: -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

  9. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

随机推荐

  1. Redis2.8之后主从复制的流程

    梳理一下Redis2.8之后主从复制的流程:

  2. kali渗透综合靶机(七)--Super-Mario-Host靶机

    kali渗透综合靶机(七)--Super-Mario-Host靶机 靶机百度云下载  链接:https://pan.baidu.com/s/13l1FUgJjXArfoTOfcmPsbA 提取码:a8 ...

  3. 2019-11-25-win10-uwp-通过命令行脚本开启旁加载

    原文:2019-11-25-win10-uwp-通过命令行脚本开启旁加载 title author date CreateTime categories win10 uwp 通过命令行脚本开启旁加载 ...

  4. 高性能TcpServer(C#) - 2.创建高性能Socket服务器SocketAsyncEventArgs的实现(IOCP)

    高性能TcpServer(C#) - 1.网络通信协议 高性能TcpServer(C#) - 2.创建高性能Socket服务器SocketAsyncEventArgs的实现(IOCP) 高性能TcpS ...

  5. [翻译]微软 Build 2019 正式宣布 .NET 5

    原文: Introducing .NET 5 今天,我们宣布 .NET Core 3.0 之后的下一个版本将是 .NET 5 .这将是 .NET 系列的下一个重要版本. 将来只会有一个 .NET ,您 ...

  6. Python - 获取本机IP地址、Mac地址

    Python - 获取本机IP地址.Mac地址 在python中获取ip地址和在php中有很大不同,在php中往往比较简单.那再python中怎么做呢? 直接看代码: # Python - 获取本机I ...

  7. 让windows 10 家庭版 支持 Hyper-v 的方法

    pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt for /f ...

  8. vuePress自动部署到Github Page脚本踩坑

    背景 照着官网的教程来就行了,踩了个小坑,记录一下,希望对你有帮助 这是部署后的效果 小坑1 如图所示,官网推荐部署命令 然而windows 没有bash 指令, 直接运行报错 两个解决方法: 项目根 ...

  9. IOS plist文件

    转自:http://www.cnblogs.com/geraldzhang/archive/2011/08/24/2152121.html 在Mac OS X 的Cocoa ,NeXTSTEP 和GN ...

  10. Struts2 在Action中操作数据

    Servlet存储数据的方式 在Servlet中,使用ServletContext对象来存储整个WebApp的数据,ServletContext中直接存储整个WebApp的公共数据,可使用set|ge ...