<!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. java package 命名空间

    原文: http://www.studytonight.com/java/package-in-java.php 创建一个简单的maven 项目的命令是: mvn  archetype:generat ...

  2. [RxJS] Throttling vs Debouncing

    DebounceTime: It's like delay, but passes only the most recent value from each burst of emissions. T ...

  3. C++ Development Library

    C/C++ 开发库 | C/C++ Development Library 这里收集一些著名的 C/C++ 开发库.SDK.类库.可复用类与结构代码 等信息,列举它们的介绍.参考和网站链接,为各位 C ...

  4. bzoj4950: [Wf2017]Mission Improbable

    跟着靖靖做题%%%%% 这题一看就觉得和之前的某场模拟赛的一道题很像,找假如某行某列的最大值一样的就可以只堆一个,跑匈牙利就行 一开始以为箱子不能移动-_-! 然后有个坑,大家都知道当这个位置有箱子就 ...

  5. P2932 [USACO09JAN]地震造成的破坏Earthquake Damage 爆搜

    这题怎么这么水~~~本来以为挺难的一道题,结果随便一写就过了...本来还不知道损坏的牛棚算不算,结果不明不白就过了... 题干: 农夫John的农场遭受了一场地震.有一些牛棚遭到了损坏,但幸运地,所有 ...

  6. warning: here-document at line 7 delimited by end-of-file (wanted `rui')

  7. 99.ext afteredit事件详解

    转自:http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0524/203.html 1 摘要 grid.on(afteredit,afterE ...

  8. qW3xT.2挖矿病毒 解决过程及坑

    周一早上老大让我把项目更新一下,然后配置一下elasticsearch,我登上服务器之后部署的时候没有什么感觉,但是在配置elasticsearch的过程中感觉服务器哪个地方有点不对,下意识的top了 ...

  9. 从flink-example分析flink组件(1)WordCount batch实战及源码分析

    上一章<windows下flink示例程序的执行> 简单介绍了一下flink在windows下如何通过flink-webui运行已经打包完成的示例程序(jar),那么我们为什么要使用fli ...

  10. CAS配置(2)之主配置

    WEB-INF目录 1.cas.properties文件(打开关闭SSL,主题,定制页面设置) #默认端口配置 #server.name=http://localhost:8080server.nam ...