有时候文字太多，但为了美观想要在第二行的时候才显示省略号，而不是第一行超出马上就出现省略号

下面是css代码：

overflow:hidden;
text-overflow: ellipsis;//显示省略号
display:-webkit-box;
-webkit-line-clamp:2;//块元素显示的文本行数
-webkit-box-orient:vertical;

截图：

定义在div上就可以了

上效果图

这样文字不会到第三行

html div内第二行文字显示不下的时候才用省略号代替 css实现的更多相关文章

  1. Cell 动态行高文字显示不全问题探索

    目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...

  2. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  3. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  4. div内文字显示两行，多出的文字用省略号显示

    用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...

  5. ios UILabel在storyBoard或xib中如何在每行文字不显示完就换行

    大家知道怎么用代码让label中的文字换行,只需要 label.numberOfLines = 0; label.text = @"这是第一行啦啦啦啦,\n这是第二行啦啦,\n这是第三行&q ...

  6. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  7. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  8. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

  9. 如何通过css控制内容显示顺序 第二行的内容优先显示

    我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前,又不想改动代码的先后顺序,要怎么操作呢?(或者换种说法:源代码中要先看到A再看到B,而视觉上是先B再A)举个简单的例子,想让第二行的内容在不 ...

随机推荐

  1. nssm 在windows上部署服务

    简介 NSSM是一款可将Nodejs项目注册为Windows系统服务的工具.当你的Node.js项目需要部署在Windows Server上时,NSSM是一个不错的选择. 特点 NSSM将Node.j ...

  2. Redis的Windows端开发连接Linux端以及相应的代码实现

    在Windows端开发连接需要进行配置文件的配置: 在redis.conf配置文件中 将protected-mode yes,修改为protected-mode no:不保护redis # By de ...

  3. linux iptables 开启和关闭服务端口号

    需求: 模拟数据库挂掉,服务正常但访问数据库报错,恢复数据库端口后,服务是否能正常访问数据库 步骤:首先,断掉端口号5432,测试服务运行情况:其次,开启端口号5432,测试服务运行情况: 具体操作: ...

  4. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  5. kakfa 开发-01

    kafka 开发梳理 使用内置的zoookeeper启动 bin/zookeeper-server-start.sh config/zookeeper.properties tips: 出现0.0.0 ...

  6. RockBrain USB Server- 云计算虚拟化USB设备集中管理、远程共享解决方案（涉及银企直联）

    RockBrain USB Server- 云计算虚拟化USB设备集中管理.远程共享解决方案(涉及银企直联) 技术需求: 1．企业员工的大量USB Key,需要将key接入USB Server虚拟池, ...

  7. 个人免签收款接口 bufpay.com 支持限额设置

    有产品希望收款分布到不同的手机,每个当手机达到某一限额以后就停止改手机的收款. bufpay.com 近期上线了收款限额设置功能,配置界面如下图: 每个手机微信或支付宝可以单独设置每日限额,如果该手机 ...

  8. 【模板】缩点(tarjan,DAG上DP)

    题目背景 缩点+DP 题目描述 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点,但是,重复经过的点,权值只 ...

  9. BZOJ2298: [HAOI2011]problem a(带权区间覆盖DP)

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1747  Solved: 876[Submit][Status][Discuss] Descripti ...

  10. 简易坦克大战python版

      #! /usr/bin/env python # -*- coding:utf8 -*- ''' *author:wasua *purpose:学习python语言,其中的类以及pygame应用 ...