zoukankan      html  css  js  c++  java
  • CSS

    <style>
    .container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } .c-red { color: red; } p { background-color: rgba(189, 227, 255, 0.28); padding: 2px 5px; } /*单行*/ .single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /*多行*/ .mutiple { display: -webkit-box; /*重点,不能用block等其他,将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/ -webkit-line-clamp: 3; /*行数,超出三行隐藏且多余的用省略号表示...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%; } </style> <div class="container"> <p class="single"> <span class="c-red">单行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。 </p> <p class="mutiple"> <span class="c-red">多行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处, 对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。 </p> </div>

     demo:

    单行溢出:《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。

    多行溢出:《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程, 全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处, 对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。

  • 相关阅读:
    文件批量上传
    XML如何不进行解析原样输出
    1456710017
    java标准百分比
    解决SSM项目下静态资源(img、js、css)无法引用的问题
    MySQL查询当天数据以及大量查询时提升速度
    多线程test
    JAVA中等待所有线程都执行结束(转2)
    java中等待所有线程都执行结束
    关于Java多线程(JAVA多线程实现的四种方式)
  • 原文地址:https://www.cnblogs.com/taobr/p/14718751.html
Copyright © 2011-2022 走看看