<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        p{

            width:300px;

            height:56px;

            overflow : hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            display: -webkit-flex;

            display: flex;

            display: -webkit-box-flex;

            -webkit-line-clamp: 3;

            -webkit-box-orient: vertical;

        }

    </style>

</head>

<body>

<p>

    static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

</p>

</body>

</html>

css3实现超过两行文字，超出用三个点显示（兼容性不行，仅供学习）的更多相关文章

  1. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  2. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  3. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  4. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  5. h5文字超出，两行显示，超出显示省略号

    最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...

  6. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  7. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 解决Bootstrap 附加导航（Affix）的问题和使用时若干注意事项

    1.要清楚Affix分别赋予的class, 开始:affix-top 达到top参数:affix 达到bottom参数:affix-bottom 2.一定要自定义这些class,否则 插件会默认给你在 ...

  2. 复旦大学2014--2015学年第一学期（14级）高等代数I期末考试第七大题解答

    七.(本题10分)  设 \(V\) 为数域 \(\mathbb{K}\) 上的 \(n\) 维线性空间, \(S=\{v_1,v_2,\cdots,v_m\}\) 为 \(V\) 中的向量组, 定义 ...

  3. SqlSever基础 union 将得到的横表变为纵表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. 在JSP页面显示九九乘法表

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. sql 集合运算

    UNION 并运算 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SE ...

  6. 【转】JSP总结

    day1 JSP 定义:     1)Java Server Page, Java EE 组件,本质上是 Servlet.     2)运行在 Web Container.接收 Http Reques ...

  7. eclipse+tomcat开发web项目

    也许正在使用的人会觉得这个过程谁不知道啊? 但是对于一个混迹各种语言编程有些年头的我来讲,却必须记录下来! 因为今天以前,我都通过配置[eclipse的tomcat插件]+编写[ant脚本,build ...

  8. 重命名myclipse中web项目名称的过程

    1 打开 myclipse2 最顶层项目上右键,Refactor,新名,3 最顶层项目上右键,propterties, MyEclipse, Web, context-root: /新名4 替换 .c ...

  9. 清除SVN获取文件的所有.svn文件夹

    Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\清除SVN信息] @=&qu ...

  10. STORM_0009_Lifecycle-of-a-topology/拓扑的生命周期

    http://storm.apache.org/releases/1.0.1/Lifecycle-of-a-topology.html STORM拓扑的生命周期   本页的内容基于0.7.1代码,后来 ...