利用css实现带有省略号的段落
带有省略号的段落就是你只能在一行显示一段文字,文字过长是肯定不能完全显示的,如果默认的话,超出的文字会自动换行,撑大盒子。
1.这时需要设置white-space: nowrap,禁止换行。这样的话,文字就会在一行显示
2.在一行显示就会有超出的部分,使用overflow: hidden将超出的部分隐藏。
3.虽然隐藏了,但是有可能最后一个字被挡住一部分,而且我们需要的是省略号,这时再加上text-overflow: ellipsis;就可以将最后改成省略号。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
利用css实现带有省略号的段落的更多相关文章
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用css的border实现画三角形思路原理
1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
随机推荐
- openstack创建虚拟流程、各组件介绍
登录界面或命令行通过RESTful API向keystone获取认证信息. keystone通过用户请求认证信息,并生成auth-token返回给对应的认证请求. 界面或命令行通过RESTful AP ...
- tail -f 命令暂停方法
Linux 下查看日志时,使用 tail -f 可以不断的刷新日志信息. 例如: tail -f logs.log 此时要想暂停刷新,使用ctrl+s暂停终端.若想继续终端,使用ctrl+q. 若想退 ...
- 一些常见的Java面试题 & 面试感悟
< 前言 > 近期在面试,深感这个行业的浮躁,一些菜不辣基的弱鸡开出的工资待遇要求,超过了我.不知道他们是怎么拿到那么高的工资的,难道是他在公司有亲戚朋友吗?有后台吗?是行业热钱真的过多了 ...
- ssm注入失败
今天做ssm整合时候,创建bean/注入一直出错,检查几遍没发现问题,后来发现犯了个低级错误,mapper.xml的<mapper namespace="XXXXX" > ...
- C++_注释、枚举、typedef
#include<iostream> //using namespace std; int main() { /* ************************************ ...
- leetcode894
class Solution { private Map<Integer, List<TreeNode>> memo; public List<TreeNode> ...
- 2018-2019-2 网络对抗技术 20165304 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165304 Exp3 免杀原理与实践 免杀原理及基础问题回答 一.免杀原理 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. ...
- 服务器还原阿里云Mysql数据库
https://www.percona.com/doc/percona-xtrabackup/2.3/installation/yum_repo.html
- Oracle使用学习笔记(二)_Sql语句
一.Sql语句的分类 数据操作语言,简称DML(data manipulation language),如增加,删除,修改,查询数据等 数据定义语言,简称DDL(data defination lan ...
- [原创] debian 9.3 搭建seafile企业私有网盘
[原创] debian 9.3 搭建seafile企业私有网盘 需求是这样的, 个人疲惫于 "成为大伙的文件中转站" ,公司不管大大小小的文件,都要打电话过来“转个xx文件”.“帮 ...