1 2 3 4

css 在一定区域内滚动显示,不修改父级样式

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

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

 

 代码:

<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: 90%;
    height: 64%;
    overflow: hidden;
    /* border: 1px dashed red; */
}
.right-text-p {
    padding: 0 8% 0 3%;
    text-align: left;
    line-height: 2.4em;
    font-size: 1.3em;
    color: #333333;
    text-indent: 2em;
    white-space: pre-wrap;
    height: 90%;
    width: calc(100% + 1em);
    overflow: auto;
}

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

posted @ 2019-08-26 14:20  Dawnzhang  阅读(333)  评论(0编辑  收藏
PV