项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上。虽然用的多,但是我也不知道为啥,我始终记不住。所以,通过这种方式,让自己加深一下印象

情况一:单行文字超出规定宽度后,以省略号形式展示

具体的样式如图:

代码:

.css{
width:200px;//示例宽度
height:40px;//示例高度
overflow:hidden;
width-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

情况二:多行文字超出规定宽度和高度后,以省略号形式展示

这种情况需要给装文字的盒子设置属性为box属性;

代码:

.css{
width:200px;
height:100px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:;//根据业务需求设置
overflow:hidden; }

css中多余文字省略号显示的更多相关文章

  1. CSS多余文本省略号显示

    CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...

  2. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  3. android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边

    很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ​ 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...

  4. CSS隐藏多余文字的几个方法

    通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:- ...

  5. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

  6. css设置两行多余文字用..显示

    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;

  7. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  8. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  9. 关于button中设置文字不显示的问题

    这个因为使用的image加载方式是setimage而不是setbackgroundimage导致文字始终出不来.

随机推荐

  1. re.sub用法

    re.sub功能是对于一个输入的字符串,利用正则表达式,来实现字符串替换处理的功能返回处理后的字符串 re.sub共有五个参数 三个必选参数pattern,repl,string 两个可选参数coun ...

  2. 使用valgrind进行内存泄漏和非法内存操作检测

    valgrind是一个强大的工具,最常用的功能是用它来检测内存泄漏和非法内存的使用.要想让valgrind报告的更加细致,请使用-g进行编译. 基本命令如下: $ valgrind --tool=me ...

  3. openocd+jlink为mini2440调试u-boot

    需要安装openocd,如果已经安装了系统默认的openocd(默认是0.5.0,版本太低),需要先卸载掉. 在安装前需要安装必需的一些库文件: -dev libusb-1.0-0 automake ...

  4. hadoop —— MapReduce例子 (求平均值)

    参考:http://eric-gcm.iteye.com/blog/1807468 math.txt: 张三 88 李四 99 王五 66 赵六 77 china.txt: 张三 78 李四 89 王 ...

  5. 2014暑假ACM训练总结

    2014暑假ACM训练总结报告 匆匆之中,一个暑假又过去了,在学校训练的这段日子真的是感觉日子过得好快啊! 时光如箭,日月如梭! 匆忙的学习之中一个暑假就这样结束了,现在就来写一些总结吧,供自己以后阅 ...

  6. 关于MVC模板渲染的一点小事type="text/template"

    先上一个demo,简单粗暴,请自便 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. 破解 Navicat Premium 12

    一.下载 若文件百度云链接失效,请发邮件给博主:1766211120@qq.com 1.安装文件下载 v12.0.11(x64)版本下载地址如下 链接:https://pan.baidu.com/s/ ...

  8. 插件_热部署_JRebel

    一.License Server 1.运行反向代理 GitHub地址:https://github.com/ilanyu/ReverseProxy 下载地址:ReverseProxy_windows_ ...

  9. POJ3107Godfather(求树的重心裸题)

    Last years Chicago was full of gangster fights and strange murders. The chief of the police got real ...

  10. python mysqldb 教程

    MySQL Python 教程 (1)下面是在Python中使用MySql数据库的教程,涵盖了Python对MySql的基础操作,主要采用了MySQLdb模块,下面的代码都是基于Ubuntu Linu ...