<!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. HTML5：防止页面在移动设备上缩放

    在制作网页时,如果对移动设备有做兼容设计的话,通常是不希望页面在移动设备能够被缩放.这样可以防止原先设计好的样式被破坏.要做到这一点,只需要在网页的head部分加入如下语句即可: <!-- 屏蔽 ...

  2. TCP学习(3)--TCP释放连接的过程(四次挥手)

    一.TCP释放连接的过程(四次挥手)    TCP释放连接的步骤例如以下图所看到的.    如今如果clientA和server端B都处于数据传送状态. TCP连接断开的过程例如以下: 1.clien ...

  3. IBM CEO罗睿兰：科技公司屹立百年的3个秘诀

    假设有不论什么科技公司能够完美阐释"转型"这个词的含义,那么这家公司非创立103年的IBM莫属. 如今,它的变化更胜以往. 在<財富>杂志周二于美国加利福尼亚州拉古纳尼 ...

  4. [ACM] POJ 3295 Tautology (构造）

    Tautology Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9302   Accepted: 3549 Descrip ...

  5. ExtJs--06--Ext.WindowGroup相关方法简单使用

    Ext.onReady(function(){ //用windowGroup对象去操作多个window窗体 var winG = new Ext.WindowGroup(); for (var i = ...

  6. hdu1325 Is It A Tree?(二叉树的推断)

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  7. VIM 移动

    基础 字符移动 k 上移 k h 左移 h l l 右移 j j 下移 你也可以使用键盘上的方向键来移动,但这么做h j k l的存在就失去了意义 之所以使用h j k l来控制方向,其主要目的是让你 ...

  8. oc40--类的启动过程

    // // main.m // 类的启动过程 #import <Foundation/Foundation.h> #import "Person.h" #import ...

  9. bzoj3047:Freda的传呼机&&bzoj2125: 最短路

    完结撒花!!!!!!!!!!! 最后一题填坑1A仙人掌WWWWWWW我真流弊 首先把环拆开,环中每一个点连向环的根,然后搞LCA,答案就是套路的d[x]+d[y]-d[lca]*2 然后就可以发现,其 ...

  10. P2831 愤怒的小鸟 状压dp

    这个题主要是预处理比较复杂,先枚举打每只鸟用的抛物线,然后找是否有一个抛物线经过两只鸟,然后就没了. 题干: 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上 ...