<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<title>css实现多行文字限制显示</title>

<style>

　  /*
  　　 编译的时候，默认会过滤-webkit-box-orient: vertical;导致多行文本省略显示不生效
   　　解决方案：关闭autoprefixer然后再开启并注释掉
　 */

#test {

display: box;

display: -webkit-box;

box-orient: vertical;

　 /* autoprefixer: off */

　 -webkit-box-orient: vertical;

　 /* autoprefixer: on */

line-clamp: 2;

-webkit-line-clamp: 2;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

</head>

<body>

<p id="test">多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示</p>

</body>

</html>

css实现多行文字限制显示&编译失效解决方案的更多相关文章

  1. CSS实现多行文字限制显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

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

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

  3. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

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

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

  5. css布局-多行文字垂直居中

    方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...

  6. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  7. 【css】多行文字图片混排容器内垂直居中解决方案

    css:   .box-wrap{display:table;width:200px;height:200px;*position:relative;}/*最外边的容器,需固定宽高*/ .box-ha ...

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

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

  9. Windows下命令行Git无法显示中文问题解决方案

    Windows下Git设置编码正常显示中文: 在 CMD 下设置环境变量 set LESSCHARSET=utf-8 在 PowerShell 下设置环境变量 $env:LESSCHARSET='ut ...

随机推荐

  1. 配置Chrome的代理服务器

    用命令行启动Chrome,带以下参数: --proxy-server="socks5://myproxy:8080"   下列参数可选 --host-resolver-rules= ...

  2. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...

  3. HDU1010-奇偶剪枝(DFS)

    题目链接:Tempter of the Bone 第一次做剪枝的题目,剪枝,说实话研究的时间不短.好像没什么实质性的进展,遇到题目.绝对有会无从下手的感觉,剪枝越来越神奇了. .. . HDU1010 ...

  4. Android WiFi开发教程（三）——WiFi热点数据传输

    在上一篇文章中介绍了WiFi的搜索和连接,如果你还没阅读过,建议先阅读上一篇Android WiFi开发教程(二)——WiFi的搜索和连接.本篇接着简单介绍手机上如何通过WiFi热点进行数据传输. 跟 ...

  5. 洛谷P2593 [ ZJOI 2006 ] 超级麻将 —— DP

    题目:https://www.luogu.org/problemnew/show/P2593 DP的话,考虑到当前这一位只跟前两位有关,所以记录一下这3位的状态就行: 于是一开始记录的第 i 位,i- ...

  6. Hamming Distance(随机算法)

    http://acm.hdu.edu.cn/showproblem.php?pid=4712 题意:计算任意两个十六进制的数异或后1的最少个数. 思路:用随机数随机产生两个数作为下标,记录这两个数异或 ...

  7. LocalDateTime相关处理，得到零点以及24点值，最近五分钟点位，与Date互转，时间格式

    最近一直使用LocalDateTime,老是忘记怎么转换,仅此记录一下 import java.time.Instant; import java.time.LocalDateTime; import ...

  8. WebService开发-CXF

    Web Service 开发方式 Apache CXF 一.关于Apache CXF 在网址http://cxf.apache.org/可以查看到关于Apache CXF的下载及文档介绍,这里不再多做 ...

  9. 点开，看一段，你就会喜欢上学习pandas，你该这么学！No.3

    身为一个啰嗦的博主,还是要说点啥,如果你不想学,直接拖拽到最后,发现彩蛋,然后3秒 我呢,有个小目标,就是把技术类的文章,写的有趣 编程呢,最难的是什么? 我投票给入门 其实,把一个人带进编程的大门是 ...

  10. 工具分享1：文本编辑器EditPlus、汇编编译器masm、Dos盒子

    工具已打包好,需要即下载 链接 https://pan.baidu.com/s/1dvMyvW 密码 mic4