css文本截字,超出文本省略号显示
一、单行文本截字
p {
text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/
white-space: nowrap;/*空白处理方式 不换行*/
overflow: hidden;/*溢出隐藏*/
}
效果:

二、多行文本截字
p{
display:-webkit-box;/*设置盒子为弹性盒容器*/
-webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/
-webkit-line-clamp:;/*显示两行*/
text-overflow:ellipsis;/*用省略号代替才建的文字*/
overflow:hidden;/*溢出隐藏*/
/*若为纯字母、数字,需要加上下面这句*/
word-break:break-all;
}
效果

css文本截字,超出文本省略号显示的更多相关文章
- android开发之当设置textview多少字后以省略号显示。限制TextView的字数
设置多少字后以省略号显示 <TextView android:id="@+id/tv" android:layout_width="wrap_conten ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- 翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- 文本太长,用省略号显示的css样式
——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- css 文字展示两行 其余的省略号显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5--div、span超出部分省略号显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
随机推荐
- 《ArcGIS Runtime SDK for Android开发笔记》——数据制作篇:发布具有同步能力的FeatureService服务
1.前言 从ArcGIS 10.2.1开始推出离在线一体化技术之后,数据的离在线一体化编辑一直是大家所关注的一个热点.数据存储在企业级地理数据库中,通过ArcGIS桌面软件加载后配图处理,并发布到Ar ...
- Mysql 服务无法启动解决办法
1.我使用的是MySQL-5.7.10-winx64 版本,在安装后启动服务时出现 “服务无法启动”错误 2.解决办法为删除安装目录中的data文件,然后打开cmd调到自己的安装目录下输入mysqld ...
- IOS开发入门实例
关于如何创建第一个 iOS 应用 本篇“第一个 iOS 应用”教程将向你介绍 iOS 应用开发中的“三个T”: Tools(工具)如何利用 Xcode 创建和管理工程. Technologies(技术 ...
- sqlserver broker远端端点证书认证
1:采用windows验证的方法: CREATE ENDPOINT InstInitiatorEndpoint STATE = STARTED AS TCP ( LISTENER_PORT = ) F ...
- Centos7安装JDK1.8 Linux64bit
流程一览: 1.下载JDK1.8(jdk-8u11-linux-x64.tar.gz) 2. 解压缩安装 3.配置JAVA_HOME环境变量 4.切换JDK1.8为当前使用的JDK 5.重启,查看安装 ...
- oracle_union_operator
SQL: UNION Operator This SQL tutorial explains how to use the SQL UNION operator with syntax and exa ...
- jdk是什么?jdk1.8安装配置方法
jdk是什么呢?jdk的是java development kit的缩写,意思是java程序开发的工具包.也可以说jdk是java的sdk. 目前的JDK大致分三个大版本:Java SE:Java P ...
- Android(java)学习笔记52:成员位置的内部类的介绍
1. 内部类的定义 /* 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. ...
- PIL 图像字符画绘制
from PIL import Image ascii_char = list('"$%_&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\|()1{}[]? ...
- 【[SDOI2010]粟粟的书架】
第一问的做法好像不太一样 首先第二问非常简单,直接在主席树上二分就好了,单次查询的复杂度\(O(logn)\) 第一问并没有想到有二分这种神仙操作,依旧用的是主席树 我们可以对矩阵建出主席树,也就是像 ...