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

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. C++入门经典-例5.2-使用指针比较两个数的大小

    1:代码如下: // 5.2.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  2. SSM三大框架整合配置详解

    首先,导入框架所需要的全部jar包(此处省略...........) 第一步:先从mybatis框架开始 我们只需要在mybatis的核心配置文件sqlConfigXml里写上这么一段话,代表的是给p ...

  3. 胜利点20191010-5 alpha week 1/2 Scrum立会报告+燃尽图 03

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8747 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  4. python dict字典添加元素

    已存在的字典进行赋值操作 可为该字典添加新元素例子:a = {‘age’: 23, ‘name’: ‘lala}a[school] = ‘nanhaizhongxue’print a>>& ...

  5. docker—tomcat 报错:Failed to get D-Bus connection: Operation not permitted

    docker search centos   查系统镜像 docker pull docker.io/centos 进入容器 [root@git opt]# docker images REPOSIT ...

  6. 精简版 Selenium PageFactory, Annotation 实例

    精简版 Selenium  PageFactory, Annotation 实例. 先是类: HomePage package com.test;import org.openqa.selenium. ...

  7. redis的LRU策略理解

    首先看下serverCron中,服务器每次循环执行的时候,都会刷新server.lrulock. int serverCron(struct aeEventLoop *eventLoop, long ...

  8. 再谈 Devstack(Rocky)

    目录 文章目录 目录 前言 网络拓扑 运行环境 要点 步骤 前言 之前写过一篇<Openstack 实现技术分解 (1) 开发环境 - Devstack 部署案例详解>,随着 Devsta ...

  9. python虚拟环境mkvirtualenv使用

    安装virtualenvwrapper  pip install virtualenvwrapper   修改默认虚拟环境目录: 环境变量中新建: 变量名:WORKON_HOME 变量值:目录位置 ( ...

  10. RTX系统整合记录

    1.切换数据库RTX常见问题解答五. SQL数据库配置 2.同步系统组织机构 部门同步 用户同步https://blog.csdn.net/qq_21703215/article/details/80 ...