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

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

具体的样式如图:

代码:

.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. Java for LeetCode 083 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  2. LeetCode:递增的三元子序列【334】

    LeetCode:递增的三元子序列[334] 题目描述 给定一个未排序的数组,判断这个数组中是否存在长度为 3 的递增子序列. 数学表达式如下: 如果存在这样的 i, j, k,  且满足 0 ≤ i ...

  3. Android中m、mm、mmm、mma、mmma的区别

    m:编译整个安卓系统 makes from the top of the tree mm:编译当前目录下的模块,当前目录下需要有Android.mk这个makefile文件,否则就往上找最近的Andr ...

  4. hadoop —— MapReduce例子 (数据去重)

    参考:http://eric-gcm.iteye.com/blog/1807468 例子1: 概要:数据去重 描述:将file1.txt.file2.txt中的数据合并到一个文件中的同时去掉重复的内容 ...

  5. 大数据- 自定义Log4j日记

    1.新建一个java project,在src下新建一个lib文件夹和 rescources 文件夹,resources文件夹不能命名错误. 点击File——>project Structure ...

  6. Use trained sklearn model with pyspark

    Use trained sklearn model with pyspark   from pyspark import SparkContext import numpy as np from sk ...

  7. ES BM25 TF-IDF相似度算法设置——

    Pluggable Similarity Algorithms Before we move on from relevance and scoring, we will finish this ch ...

  8. 【LeetCode】Maximum Product Subarray 求连续子数组使其乘积最大

    Add Date 2014-09-23 Maximum Product Subarray Find the contiguous subarray within an array (containin ...

  9. HihoCoder1656 : 前缀后缀查询([Offer收割]编程练习赛39)(字典树+小技巧)

    描述 给定一个包含N个单词的字典:{W1, W2, W3, ... WN},其中第i个单词Wi有具有一个权值Vi. 现在小Hi要进行M次查询,每次查询包含一个前缀字符串Pi和一个后缀字符串Si.他希望 ...

  10. 谈"零缺陷"

    在刚参加工作初期的一次关于质量的培训中,第一次听到"零缺陷"这个词懵懵懂懂,当成一道概念题给记下.今年重读<质量免费>时对与零缺陷的部分始终心存疑虑,最近读<第一 ...