学习《css世界》笔记之使用overflow做文字溢出点点点效果
效果图
HTML
<p class="p1">qwertyuiopasdfghjklzxcvbnm</p><div class="d1"><p> 冯塘村过去经济较为落后。几年前,镇里以400多年的冯塘古村为基础,引来社会资金投资休闲农庄和共享民宿,把这里建设成了一个集生态农业、创意农业、旅游观光、休闲体验、果蔬采摘、农产品生产加工等为一体的乡村生态旅游区。</p></div>
CSS
.p1{width: 200px;text-overflow: ellipsis;white-space: normal;overflow: hidden;}.d1{width: 200px;border: 1px solid #FF0000;}.d1 p{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
ps:在p标签中使用全英文如
<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>
是不会自动换行的,需要修改p标签的换行规制,
p{word-wrap:break-word;
// 或者 word-break: break-all;
}
释义:
1.white-space:设置如何处理元素间的空白,默认为normal,表示空白会被浏览器忽略,white-space: nowrap;表示不换行。
2.word-break:规定自动换行的处理方法。normal:使用浏览器默认换行规则,break-all:允许在单词内换行,keep-all:只能在半角空格或连字符处换行。
3.word-wrap:允许长单词或URL地址换行到下一行。normal:只在允许的断字点换行(浏览器保持默认处理),break-word:在长单词或URL地址内部进行换行。
若两个属性同时存在,以word-break: break-all;为准。
建议使用p标签测试时,使用中文
学习《css世界》笔记之使用overflow做文字溢出点点点效果相关推荐
- CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
- DIV+CSS页面设计中的IE6的文字溢出BUG
为什么这个div的文字在ie6里会多出3个字符,在页面制作中用DIV+CSS用的多了有时会遇到文字溢出的现象,出现此现象是由IE6的3PX的BUG所引起的. 以下为出现该BUG的实例: <div ...
- 皮卡皮卡:学习CSS的笔记
1.CSS简介 CSS,指的是Cascading Style Sheet(层叠样式表). 2.CSS的引入方式 1)外部样式表(link): <link rel=" ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head>/* *通配符选择器 匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种 一种是内嵌 ...
- CSS处理文字一行显示,超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码 注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
- 学习笔记——css世界
流 "流"又叫文档流,是css的一种基本定位和布局机制.流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动."流体布局"是html默认的布局机 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸 下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
- 《CSS 世界》读书笔记-流与宽高
大厂技术 坚持周更 精选好文 1. 前言 在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向.作为前端新手,经常会坐在显示器前花很多很多时间去 "追" 视觉稿, ...
最新文章
- 使用AWSTATS自动分析Nginx日志
- 看到数学就打怵不是你的错:百万人调查发现上黑板做题、作业太多、家长陪写都会引发焦虑|PNAS...
- Angular Chart.js第三方库ng-chartjs基础使用
- insert into select 优化_数据库优化总结
- Docker下安装GitLab
- OpenCV4系统化学习路线图与教程
- Java 注解Annotation总结二
- 最简单的Rest服务
- 在家如何下载各大权威数据库文献
- Google搜索命令语法
- 计算机网络名词解释dns_DNS名词解释
- 微信开发者工具 缓存目录
- 内网穿透软件对比——cpolar : 网云穿(下)
- 数据结构与算法-平衡二叉搜索树
- 算法基础部分-二叉树
- 2022劳务员-通用基础(劳务员)复训题库及在线模拟考试
- _access()函数的使用
- 基于 MySQL Binlog 的 Elasticsearch 数据同步实践 原
- Alex -机器学习
- 衡水中学计算机老师,河北衡水中学|高三榜样教师风采展
热门文章
- 荷兰牛栏 荷兰售价_荷兰的公路货运是如何发展的
- 黑客马拉松 招募_我如何赢得第一次黑客马拉松-研究,设计和编码的2个狂野日子
- 如何使用JavaScript检查输入是否为空
- 如何在10分钟内让Redux发挥作用
- 心理学专业转用户体验_用心理学设计奇妙的用户体验
- css grid布局_如何使用CSS Grid重新创建Medium的文章布局
- Flutter 36: 图解自定义 View 之 Canvas (三)
- SQL手工注入入门级笔记(更新中)
- SQL Server读写分离之发布订阅
- Python学习之路:函数介绍