css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
一、文本单行显示溢出时出现省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
二、文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度)
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
三、首行缩进两字符
text-indent: 2em;
四、划线文字
text-decoration: line-through;
css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进的更多相关文章
- CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号
为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- 转载 | CSS实现单行、多行文本溢出显示省略号(…)
本文引自:https://www.cnblogs.com/wyaocn/p/5830364.html 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-o ...
- css自动省略号...,通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- CSS实现单行、多行文本溢出显示省略号
单行显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行显示省略号 display: -webkit-box; ...
- 单行文字溢出和多行文字溢出省略号显示的CSS样式
单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...
随机推荐
- python 生成随机数的几种方法
随机取一个: import random random.choice(string.digits)#从数字里随机选取一位数字: 随机取多位数: random.sample(string.dig ...
- centos7 php5.5 mongodb安装
1.下载最新php MongoDB扩展源码 https://pecl.php.net/package/mongodb 最新的1.6不支持PHP5.5,得用老版本,1.5.5 wget https:// ...
- [HTML辅助方法-Html.Raw()的简单应用]
Html.Raw(); 当我们使用 文本编辑器,存入到数据库中的数据会带 html 标签,如果我们需要在前台显示存入时的相同样式,不输出为带有html标签的字符串 ,不通过富文本显示的话,可以通过ht ...
- np.hstack和np.vstack
np.vstack:按垂直方向(行顺序)堆叠数组构成一个新的数组 In[3]: import numpy as np In[4]: a = np.array([[1,2,3]]) a.shape Ou ...
- 集成ShareSdk一键分享和第三方登录
在Mob官网http://mob.com/注册,创建应用,下载SDK,申请APP_key 根据官网开发指南导入SDK到你的项目中: 在assets/ShareSDk.xml中修改你的APP_key p ...
- 如何解决错误【selenium.common.exceptions.SessionNotCreatedException】
如何解决错误[selenium.common.exceptions.SessionNotCreatedException] [问题起因] 2018年12月26日晚,启动我的pycharm准备学习s ...
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_07.入门案例中使用的组件介绍
这里配置上注解的支持,相当于配置了上面的前端控制器.处理映射器这两个
- 部署php程序报错解决---TP框架
1.TP框架中 出现如下错误: 访问网站 http://192.168.0.204/ STORAGE_WRITE_ERROR_:./Runtime/Cache/Home/51620d75af91aa7 ...
- 学习Go语言(一)环境安装及HelloWorld
自己开发的时候,一般用Java和C#居多,偶尔也用Python做点东东. 想体验一下比较“现代”语言,思来想去就来体验一下Go语言. 闲话少叙,言归正传,首先就是环境安装,这个轻车熟路: (1)到官网 ...
- Spring Boot 中使用 WebSocket 实现一对多聊天及一对一聊天
为什么需要WebSocket? 我们已经有了http协议,为什么还需要另外一个协议?有什么好处? 比如我想得到价格变化,只能是客户端想服务端发起请求,服务器返回结果,HTTP协议做不到服务器主动向客户 ...