CSS常用属性:
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行,只能显示一行 这个只是用适用于单行文本溢出情况,之前处理多行文本的话需要JS来支持。 CSS3新加属性:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //需要组合上面两个属性,参数是显示的行数。 实现一个两行文本溢出省略
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

css实现文本溢出省略号的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  4. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  5. 浅谈文本溢出省略号代表修剪text-overflow

    一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性.  示例 ...

  6. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  7. css文本溢出省略号大总结,如你所愿

    一行: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 两行: width ...

  8. css 文本溢出省略号

    单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: ...

  9. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

  10. css文本溢出省略号

    .ellip{ display: block; width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...

随机推荐

  1. 拉勾java核心类库--String类

    String类 @author :magiclx 摘要:String类是用final进行修饰的,关于字符串的一个类,其中包含很多个方法 关键词:String,常量池,正则表达式,数组转化 正文: 参考 ...

  2. 9.29 2020 实验 4:Open vSwitch 实验——Mininet 中使用 OVS 命令

    一.实验目的 Mininet 安装之后,会连带安装 Open vSwitch,可以直接通过 Python 脚本调用Open vSwitch 命令,从而直接控制 Open vSwitch,通过实验了解调 ...

  3. 三、Applied visual design(应用视觉设计)

    一.文本属性整理 <style> h2 { /* 文字对齐属性 text-align */ /* center:居中,left,right:居左居右,justify:文字拉伸铺满一行 */ ...

  4. mysql取消/开启外键约束

    删除外键约束: SET foreign_key_checks=0; 启动外键约束: SET foreign_key_checks=1;

  5. C# EF框架的入门使用

    如何构建数据模型 新建项 ADO.NET 实体模型 设置链接 链接字符串需要选择"是,包含敏感数据 注意:EF的框架引用的表应该要存在主键,程序引用中要包含 using System.Dat ...

  6. 2021.06.29 mac系统下zsh: command not found:***报错问题

    最近老是遇到zsh: command not found:vue,zsh: command not found:nrm, zsh: command not found:tsc, zsh: comman ...

  7. c#获取文本中的内容

    string path = HttpContext.Current.Server.MapPath("/文件夹/名称.txt"); string ss = File.ReadAllT ...

  8. ESP32 IDF V5.0 编译环境

    方法:环境搭建工具一键安装: 下载链接:https://dl.espressif.com/dl/esp-idf/ 可以选择离线安装方式和在线安装方式,建议:采用离线安装的方式 下载离线安装包之后点击安 ...

  9. 【LeetCode回溯算法#07】子集问题I+II,巩固解题模板并详解回溯算法中的去重问题

    子集 力扣题目链接 给你一个整数数组 nums ,数组中的元素 互不相同 .返回该数组所有可能的子集(幂集). 解集 不能 包含重复的子集.你可以按 任意顺序 返回解集. 示例 1: 输入:nums ...

  10. H5-生成二维码

    <div class="poster-qr"> <div class="qrWrapper"> <!-- 放置二维码的容器 --& ...