css中多余文字省略号显示
项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上。虽然用的多,但是我也不知道为啥,我始终记不住。所以,通过这种方式,让自己加深一下印象
情况一:单行文字超出规定宽度后,以省略号形式展示
具体的样式如图:

代码:
.css{
width:200px;//示例宽度
height:40px;//示例高度
overflow:hidden;
width-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
情况二:多行文字超出规定宽度和高度后,以省略号形式展示

这种情况需要给装文字的盒子设置属性为box属性;
代码:
.css{
width:200px;
height:100px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:;//根据业务需求设置
overflow:hidden;
}
css中多余文字省略号显示的更多相关文章
- CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...
- 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
- android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边
很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...
- CSS隐藏多余文字的几个方法
通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:- ...
- 微信小程序 wxml 文件中如何让多余文本省略号显示?
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs 取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...
- css设置两行多余文字用..显示
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;
- html&css中的文字对齐问题
html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...
- css超出内容以省略号显示
控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...
- 关于button中设置文字不显示的问题
这个因为使用的image加载方式是setimage而不是setbackgroundimage导致文字始终出不来.
随机推荐
- centos下安装wordpress
https://www.jianshu.com/p/2439dc2187b2 https://blog.csdn.net/liuhelong/article/details/79924014
- WIFI模块ESP8266的使用指南【转】
本文转载自:http://www.itdadao.com/articles/c15a814052p0.html 本文主要对讲述ESP8266模块硬件连接工作,以及作为服务器和客户端情况下的配置实现的详 ...
- Centos虚拟机克隆后的ip配置
1. rm -rf /etc/udev/rules.d/-persistent-net.rules 2. 重启,然后: vi /etc/udev/rules.d/70-persistent-net.r ...
- 分享知识-快乐自己: Oracle数据库实例、用户、表、表空间之间关系
数据库: Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件). 其实Oracle数据库的概念和其它数据库不一样,这里的数据库是一个操作系统只有一个库 ...
- FZU 2091 播放器 (栈)
记住:!!!栈用完之后,在下次使用的时候一定要初始化!!花费了我一上午的时间,最后还是某杰想出来的. 题意:实现一个音乐播放器的操作,有3种操作. 注意:一开始播放器会播放播放列表中的第一首歌,也就是 ...
- python 3 - 写一个自动生成密码文件的程序
1.你输入几,文件里面就给你产生多少条密码 2.密码必须包括,大写字母.小写字母.数字.特殊字符 3.密码不能重复 4.密码都是随机产生的 5.密码长度6-11 import string,rando ...
- Posix线程编程指南(1)
这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第一篇将向您讲述线程的创建与取消. 一.线程创建 1.1 线程与进程相对进程而言,线程是一 ...
- Spring笔记03(Spring创建对象的三种方式)
1.创建对象的三种方式和bean的生命周期的验证: Animal接口代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃 ...
- 每天一个linux命令(4):pwd命令
版权声明更新:2017-05-08博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下命令cd. 2 开发 ...
- Python调试指南
http://blog.sina.com.cn/s/blog_a15aa56901017u0p.html http://www.cnblogs.com/coderzh/archive/2009/12/ ...