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

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

代码:

<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. 『珂朵莉树 Old Driver Tree』

    珂朵莉树 珂朵莉树其实不是树,只是一个借助平衡树实现的数据结构,主要是对于有区间赋值的数据结构题,可以用很暴力的代码很高效地完成任务,当然这是建立在数据随机的基础上的. 即使数据不是随机的,写一个珂朵 ...

  2. java架构之路-(mysql底层原理)Mysql索引和查询引擎

    今天我们来说一下我们的mysql,个人认为现在的mysql能做到很好的优化处理,不比收费的oracle差,而且mysql确实好用. 当我们查询慢的时候,我会做一系列的优化处理,例如分库分表,加索引.那 ...

  3. C#与vb.net源码代码互转网站

    该转换器是印度开发团队推出的,推出时间也挺长,仅支持C#和VB.net代码转换.代码转换地址: C# -> VB.NET  http://www.dotnetspider.com/convert ...

  4. 1-HTTPS之SNI介绍

    原文:https://blog.51cto.com/zengestudy/2170245 介绍 早期的SSLv2根据经典的公钥基础设施PKI(Public Key Infrastructure)设计, ...

  5. Appium 自动化测试配置wda的两种方式。

    tips:WebDriverAgent是Appium1.6.3以后版本新添加的模块,为了让appium与iPhone(基于xcuitest)设备进行通信而添加的.但是,这个模块在是一个独立的项目,在使 ...

  6. 开发技术--浅谈python数据类型

    开发|浅谈python数据类型 在回顾Python基础的时候,遇到最大的问题就是内容很多,而我的目的是回顾自己之前学习的内容,进行相应的总结,所以我就不玩基础了,很多在我实际生活中使用的东西,我会在文 ...

  7. 腾讯WeTest加入智慧零售“倍增计划”,引领微信小程序质量优化

    WeTest 导读 在2019腾讯全球数字生态大会零售分论坛上,腾讯正式面向全行业合作伙伴发布倍增计划,通过咨询.培训.竞赛三步走,帮助零售商户解决前端触点融通的问题,推动微信生意大盘阶梯式上涨. 倍 ...

  8. vue父子组件的通信

    一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Django 练习班级管理系统八 -- 上传文件

    Form表单上传文件 修改 views.py import os def upload(request): if request.method == 'GET': img_list = models. ...

  10. ant+jmeter+jenkins自动环境搭建

    一.安装前准备 1.JDK:jdk-8u131-windows-x64 2.jmeter工具:apache-jmeter-5.1.1 3.ANT工具:apache-ant-1.10.3 4.jenki ...