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

  1. div { // 单行
  2. white-space: nowrap;
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. }
  1. div { // 多行
  2. overflow: hidden;
  3. text-overflow: ellipsis;
  4. display: -webkit-box; // 注意不是flex
  5. -webkit-line-clamp:; // 指定行数
  6. -webkit-box-orient: vertical; // box元素排列水平方式
  7. }

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. FCC JS基础算法题(2):Check for Palindromes(检查回文字符串)

    题目描述: 如果给定的字符串是回文,返回true,反之,返回false.如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文).注意你需要去掉 ...

  2. CentOS版Linux系统上运行ASP.NET应用

    一.安装: 1. 安装Apache Http Server yum install httpd2. 安装Mono yum install mono3. 安装Mono插件,用来处理ASP.NET请求 y ...

  3. C# 连接池开发,多连接高效应用开发,多连接自动维护管理。

    本文将使用一个Github开源的组件库技术来实现连接池的操作,应用于一些情况下的频繁的网络连接操作. github地址:https://github.com/dathlin/HslCommunicat ...

  4. python 写的员工信息查询

    #!/use/bin/env pythonn#_*_ coding:utf-8 _*_import timedef Bre():    while True:        Bre_falg = ra ...

  5. git安装,windows下git bash默认目录更改

    最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...

  6. 源代码安装-非ROOT用户安装软件的方法

    0.    前言 如果你没有sudo权限,则很多程序是无法使用别人编译好的文件安装的. 还有时候,没有对应你的主机配置的安装包,这时候需要我们自己下载最原始的源代码,然后进行编译安装. 这样安装的程序 ...

  7. vue安装过程

    我们3个安装参考的博客地址 http://blog.qianduanchina.cn/post/596c5bb27838a71273eb4da3 http://blog.csdn.net/unamat ...

  8. JavaEE思维导图

  9. Git图形化界面客户端

    Git图形化界面客户端大汇总 文,还在不断更新,网上搜到的同名文章都是未经同意就从这里复制过去的) 一.TortoiseGit - The coolest Interface to Git Versi ...

  10. Unity Shader 矩阵基本信息

    基本信息 mul函数 mul函数,是表示矩阵M和向量V进行点乘,得到一个向量Z,这个向量Z就是对向量V进行矩阵变换后得到的值.  HLSL的mul函数接受mul(V, M)或mul(M, V),要注意 ...