一、文本单行显示溢出时出现省略号

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 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进的更多相关文章

  1. CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

    为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:

  2. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  3. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  5. 转载 | CSS实现单行、多行文本溢出显示省略号(…)

    本文引自:https://www.cnblogs.com/wyaocn/p/5830364.html 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-o ...

  6. css自动省略号...,通过css实现单行、多行文本溢出显示省略号

    网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...

  7. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  8. CSS实现单行、多行文本溢出显示省略号

    单行显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行显示省略号 display: -webkit-box; ...

  9. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

随机推荐

  1. 关于int,bool,str

    今日主要内容 基本数据类型(int,bool,str) 1.基本数据数据类型: int 整数 str 字符串. 一般不存放大量的数据 bool 布尔值. 用来判断. True, False list ...

  2. Spring的jsp标签库

    1,主要有两个 一个用于渲染HTML表单标签, 这些标签会绑定model中的某个属性 另一个包换了一些工具类标签 2,将表单绑定到模型上 包含了14个标签,海报一个人为用户展现错误的标签,它会将错误信 ...

  3. Laravel 在构造方法中使用session

  4. 使用同步上下文进行C#与VBA代码和Excel之间的交互

    原始出处:www.cnblogs.com/Charltsing/p/RunVBA.html 大家都知道,Excel是个STA,不允许在Excel忙的时候对其Com对象进行操作,也不允许同时有多个线程对 ...

  5. vue问题一:触发接口

    //在script中先引用 import api from './../../api/index' //vue文件方法中 写 del(index, row) { let self=this; // 传 ...

  6. 三步解决IDEA系列开发工具 RubyMine、IntelliJ IDEA 卡顿问题

    近日有小伙伴跟我反映说自己的开发工具很卡,有没有什么解决方案?答案是当然有啦!接下来看看怎么设置! 1.打开RubyMine,或IDEA,上边工具栏选择Help,下拉选择Edit Custom VM ...

  7. [flask]jinjia2-模板 url_for的使用

    url_for是什么? url_for()用于生成URL的函数,是Flask内置模板的1个全局函数 url_for()用来获取URL,用法和在Python脚本中相同.url_for的参数是视图的端点( ...

  8. 第九章 SpringCloud之Zuul路由

    ############Zuul简单使用################ 1.pom.xml <?xml version="1.0" encoding="UTF-8 ...

  9. python基础之字符串索引与切片

    字符串索引与切片:切片后组成新字符串与原字符串无关系增:str1+str2查:str1[index] str1[start_index:end_index]1,索引从0开始2,根据索引获取元素:索引超 ...

  10. 【神经网络与深度学习】CIFAR-10数据集介绍

    CIFAR-10数据集含有6万个32*32的彩色图像,共分为10种类型,由 Alex Krizhevsky, Vinod Nair和 Geoffrey Hinton收集而来.包含50000张训练图片, ...