一般超出文本显示分为两种：单行超出文本和多行超出文本省略号显示，实现方式使用纯css实现：

 div { // 单行

     white-space: nowrap;

     overflow: hidden;

     text-overflow: ellipsis;

 }
 div { // 多行

     overflow: hidden;

     text-overflow: ellipsis;

     display: -webkit-box; // 注意不是flex

     -webkit-line-clamp:; // 指定行数

     -webkit-box-orient: vertical; // box元素排列水平方式

 }

css实现文本超出部分省略号显示的更多相关文章

  1. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  4. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 不值一提，却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  6. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  7. CSS控制文本在一行内显示，若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  8. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

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

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

随机推荐

  1. 最短路，dijstra算法

    #include<iostream> #include<stdio.h> #include<math.h> #include<vector> using ...

  2. C++取反交换两个数的值

    int a = 1; int b = 2; cout << "a: "<< a << endl; cout << "b: ...

  3. 自动化测试-18.selenium之bugFree代码注释

    #encoding=utf-8 import xlrd,time,os from xlutils.copy import copy from selenium import webdriver def ...

  4. c++简单实现对mysql数据库操作

    1.连接数据库 #include <mysql.h> #include <iostream> #include<string> #include<vector ...

  5. #电脑磁盘分区#新买的电脑一般只有C盘或者C盘和D盘，怎么加多几个盘呢

    新买的电脑一般只有C盘或者C盘和D盘,怎么加多几个盘呢 鼠标右键点击桌面我的电脑选择管理 进入计算机管理.选择磁盘管理 若桌面没有我的电脑,可按win+x键,在快捷菜单栏中点击磁盘管理 通过以上两种w ...

  6. 常见模块(一) time/datetime

    1 time模块 1)时间三种格式的转化 2)time模块的相关方法 time.time()  打印当前时间的时间戳 单位是秒 距离1970年1月1日到当前的时间差 time.sleep(n)     ...

  7. [CSL 的魔法][求排序最少交换次数]

    链接:https://ac.nowcoder.com/acm/contest/551/E来源:牛客网题目描述 有两个长度为 n 的序列,a0,a1,…,an−1a0,a1,…,an−1和 b0,b1, ...

  8. 五分钟带你走入MP

    一.MyBatis-Plus简介 1.1MyBatis-Plus是什么? MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化 ...

  9. Cache架构设计

    Cache策略 定时过期策略 定时过期的好处是Cache节点的个数符合实际需求,不会造成资源滥用和服务器压力 定时过期适合访问量较大,实时性要求不高的情况 如果访问量小,定时过期会造成Cache命中率 ...

  10. C#的发展历程 -- 系列介绍

    C#的发展历程第五 - C# 7开始进入快速迭代道路 C#与C++的发展历程第四 - C#6的新时代 C#与C++的发展历程第三 - C#5.0异步编程巅峰 C#与C++的发展历程第二 - C#4.0 ...