css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾。今天就说说单行文本,多行文本溢出时怎么显示省略号?
单行
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
多行
display: -webkit-box; /*将对象作为弹性伸缩盒子模型展示*/
-webkit-box-orient: vertical; /*是用来伸缩盒子对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*是用来限制一个块元素现在文本的行数*/
overflow: hidden;
刚刚看了下简书首页文章列表里面,li里面就有...,而我这样写是没有的,只是显示出来有省略号,所以我觉得可以截取固定字数再加一个省略号作为li标签里面的文本这样是不是就会好多了。
css实现文本溢出显示省略号的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
- ZH奶酪:HTML元素文本溢出显示省略号(...)
一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...
随机推荐
- Linux基础学习(13)--Linux系统管理
第十三章——Linux系统管理 一.进程管理 1.进程查看: (1)进程简介:进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的 ...
- Django 2.11 静态页面404 解决
在settings中配置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"), ...
- WPF Image控件的绑定
在我们平时的开发中会经常用到Image控件,通过设置Image控件的Source属性,我们可以加载图片,设置Image的source属性时可以使用相对路径也可以使用绝对路径,一般情况下建议使用绝对路径 ...
- PHP爬虫框架Beanbun使用
第一 下载安装Beanbun框架 例如: mkdir -p BeanbunTest composer require kiddyu/beanbun 如图所示: 第二 简单下载网页的例子 <?ph ...
- Yii2的客户端验证
如何配置Yii的客户端验证呢? 首先,应该配置验证规则的场景,即scenario 其次,应该配置验证规则,在验证规则中配置客户端验证 例如:
- Cherry.chen window.clipboardData实现剪切板操作总结 (好像只有ie好用)
window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上,提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用. 三个方法 (1)clearData(sDataForma ...
- Visual Studio for Mac中的ASP.NET Core
所以你们都听到了#Build 2017的消息,Mac上的Visual Studio已经被完全发布,是一般的.为了庆祝这个版本,我将在我的Mac上写几篇关于构建一些不同的.net应用的帖子. 正如你已经 ...
- codevs3044
codevs3044 题面 大意:给出n个矩形求覆盖的总面积 看了hzwer的blog 似懂非懂 链接 可能还要多练点吧qaq #include <bits/stdc++.h> using ...
- 【Java】Android EditText开发的一个容易忽略的坑
这几天接手做一个远程控制Android application,安卓前台的EditText用来输入ip地址.端口等信息,发现EditText的使用存在着巨坑一个! 我在网上找了半天,发现仅仅有人提出这 ...
- .net core 2.0 配置Session
本文章为原创文章,转载请注明出处 配置Session 在Startup.cs文件的ConfigureServices方法中添加session services.AddSession(); 在Start ...