<!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. 【SQL】SQL中笛卡尔积、内连接、外连接的数据演示

    SQL的查询语句中,常使用到内连接.外连接,以及连接的基础--笛卡尔积运算. 在简单的SQL中,也许我们还分辨清楚数据如何连接,一旦查询复杂了,脑子也犯浆糊了,迷迷糊糊的. 本文,简单以数据形式记录连 ...

  2. Struts2应用的开发流程

    Struts2的开发流程 为了能够在eclipse中使用Struts2在进行开发时,需要根据需要导入一些有关的jar包: 在官网下载相关的压缩包,这里下载了两个:struts-2.3.30-all.z ...

  3. SqlSever基础 delete 删除一个表中的所有数据

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

  4. （1）定义一个接口Compute含有一个方法int computer(int n,int m); （2）设计四个类分别实现此接口，完成+-*/运算 （3）设计一个类UseCompute，含有方法： public void useCom(Compute com, int one, int two) （4）设计一个测试类

    package b; public interface Computer { int computer(int n,int m); } package b; public class Jia impl ...

  5. python 列表去重(数组)的几种方法

    一.方法1  代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids:     if id not in news_id ...

  6. Dreamweaver学习笔记---2016.08.17

    静态网页:不访问数据库,直接写入HTML. 动态网页:在网上发布好的,我们可以通过网页预览到的,具有访问数据库的过程. HTML:Hyper Text Markup Language,超文本语音标记. ...

  7. JavaScript的作用域和提升机制

    JavaScript的作用域和提升机制 你知道下面的JavaScript代码执行时会输出什么吗? 1 2 3 4 5 6 7 8 var foo = 1; function bar() {     i ...

  8. JS完成改变新闻字体大中小的显示

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  9. ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  10. php按条件查询的数据分页显示，点击下一页时又列出全部数据的解决办法

    其实很简单,只要把表单提交方式改为get方式就行了,然后调用分页函数: function getpage(&$m,$where,$pagesize=10){ $m1=clone $m;//浅复 ...