超过固定宽度或行数显示“...”

  做前端设计时,通常需要控制字符显示的宽度或者行数,多余字符通常以“...”替代;本文分两点情况来进行设置:

  1、需要字符保持固定宽度,其余字符显示省略号(‘...’);

  

1 .addclass{
2     width: 600px;
3     overflow: hidden;       //这个是设置隐藏的。还有其他的,例如scroll,是超出固定长度,底部显示滚动条的。
4     text-overflow: ellipsis;   //这个就是设置直接隐藏掉文字,还是显示...的。当前是显示省略号。直接省略是clip
5     display: inline-block;     //根据不同标签display值,有的不用加。
6 }

  2、需要字符显示固定行数(本文以三行为例),其余字符显示省略号(‘...’);

.addclass{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;  //这里就是设置超出几行隐藏
    -webkit-box-orient: vertical;
    display:-webkit-box;  //根据不同标签display,有的不用加
}

  以上方法基本可以满足需求。当使用第二种情况(多行隐藏)时,有童鞋遇到过设置不生效,参考如下方法:

  (1)于页面标签添加style="display:-webkit-box;"即可;(一般情况都是-webkit-box-orient,这个属性未生效)

  (2)如果方法(1)不生效,尝试以下方法,(具体实现原理请移步:https://github.com/postcss/autoprefixer/issues/776):

.addclass{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    /* autoprefixer: off */     //加这两个注释就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box;
}

  本文完结,希望可以帮助到大家!

原文地址:https://www.cnblogs.com/zw0718/p/11110014.html

时间: 2024-11-09 03:17:01

超过固定宽度或行数显示“...”的相关文章

eclipse基本设置----中文乱码、行数显示、缩进方式、行末空格和空行自动删除、常用注解

一.中文乱码 window系统下,Eclipse中导入新的项目的时候,可能会遇到中文乱码的问题. 解决方案:将系统默认的格式为GBK改成UTF-8.以下是具体解决方法,可以根据需要选择不同的方法. 1.设置整个工作空间的编码,此操作会影响整个工作空间的项目. 设置步骤:菜单栏window --  Preferences -- General -- Workspace --Text file encoding--Other --UTF-8,保存配置(Apply and Close). 2.设置项目

eclipse 代码行数显示

文本编辑器左边显示行数

//调用方式 createTextAreaWithLines('codeTextarea'); //文本编辑框左侧行数显示function createTextAreaWithLines(id) { var el = document.createElement('DIV'); var ta = document.getElementById(id); ta.parentNode.insertBefore(el, ta); el.appendChild(ta); el.className = '

安卓TextView限定行数最大值,点击按钮显示所有内容

问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前三行?   2,textview在未完全渲染前无法拿到实际的属性. 解决思路: 写好布局文件,隐藏展开按钮 填充数据,判断数据是否塞满前三行 根据上一步的判断结果,选择隐藏和显示展开按钮 具体步骤: 布局文件此处省略,很简单只有一个TextView和一个Button,并设置Button隐藏. 首先,

linux 查找指定内容并显示指定行数的命令,显示匹配行和行号

grep -i "desktop-printing-0.19-20.2.el5.x86_64" -n -A 10 install.log linux 查找指定内容并显示指定行数的命令,显示匹配行和行号,布布扣,bubuko.com

设置MyEclipse显示代码行数和设置字体的技巧

设置MyEclipse显示代码行数和设置字体的技巧 一个优秀的程序员一定会做到两点,避免bug和瞬间定位bug,显示代码的行数,能帮助我们及时发现错误,分析错误. 1.在MyEclipse菜单栏中找到Window选项,在其下拉菜单中选中Preferences选项,打开 2.在弹出的如下窗口中,在左侧选项列中选General,点击其下拉三角,找到其子选项,Editors 3.在Editors选项中,找到Text Editors选项选中,在右侧中找到Show line numbers,并勾选 4.关

Android Studio显示行数

Android Studio在打开的文件左侧单击鼠标右键,也能像Eclipse一样设置显示代码行数,如图1.但是这边跟Eclipse有一个很大的区别,Eclipse设置后,其余的对应文件也跟着生效,即使文件关闭后重新打开行数也还是会显示,但是在Android Studio中这种设置只是针对本文件,而且也只是暂时的,文件关闭重新打开后行数又不显示了,感觉这功能很鸡肋啊. 那如何设置才能使行数永久显示呢,见图2. 图1: 图2: Android Studio显示行数,布布扣,bubuko.com

css控制显示行数,多出部分显示省略号

webkit-line-clamp:number;控制行数, 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient:vertical;控制文本行数的方向,这是一个 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 . text

linux 文本文件显示行数

一般的我们在使用linux编辑器编辑文本文件的时候是不会像其他编程软件一样显示行数 临时方法: 在命令模式下输入:set nu或者:set number都可以为vi设置行号,如果要取消的话,则输入:set nonu行号的设置是vi的环境设置,不会影响文本的内容. 永久性:OS (centos)该版本系统是修改该/文件etc/vimrc 在这个文件加入 set nu 或setnumber 以后用vim编辑文件的时候就会一直显示行数了