<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:0;padding:0;font-family:微软雅黑;color:#555}

        a{text-decoration:none}

        h2 em{position:relative;font-style:normal;text-align:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

        .container{width:320px;padding:0 10px;margin:10px auto;background:#ddd}

        .container a{display:inline-block;text-align:center}

        h2{text-align:center;padding:10px 0}

    </style>

</head>

<body>

<!-- 只有一行时居中显示文字，多行居左显示，最多两行超过用省略号结尾 -->

<div class="container">

    <h2><a href="###"><em>我是单行标题居中</em></a></h2>

    <h2><a href="###"><em>我是两行标题两行标题两行标题居左</em></a></h2>

    <h2><a href="###"><em>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略标题最后点号省略</em></a></h2>

</div>

</body>

</html>

css实现一行居中显示，两行靠左显示，超过两行以引号省略的更多相关文章

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

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

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

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

  3. css实现一行居中显示，两行靠左显示

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

  4. 如何使Label显示时，一行顶部居中，两行靠左显示－－－－董鑫

    有时我们会碰到这种情况,一个要根据内容显示一行还是两行,一行时还要靠着顶部再居中,比如下面 最左边的名称,要求是靠上的,如果按照正常的方式写的话,可能一行的话就会出现居中显示了,不会顶着头部显示. 我 ...

  5. 纯CSS实现文字一行居中，多行左对齐的方法

    其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

  6. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  7. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  8. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  9. css设置一行显示，超出部分显示...

    碰到一些介绍时候需要一行显示,然后超出部分用...替代 white-space: nowrap;不换行显示text-overflow: ellipsis;以...显示overflow: hidden; ...

随机推荐

  1. Solr7 安装部署 管理界面介绍

    Solr7 安装部署 管理界面介绍 本章重点介绍CentOS 安装部署Solr7 ,Solr的管理界面介绍,添加核心Core配置,Dataimport导入数据,Documents 在线维护索引,Que ...

  2. 项目实战6—Mysql实现企业级日志管理、备份与恢复实战

    Mysql实现企业级日志管理.备份与恢复实战 环境背景:随着业务的发展,公司业务和规模不断扩大,网站积累了大量的用户信息和数据,对于一家互联网公司来说,用户和业务数据是根基.一旦公司的数据错乱或者丢失 ...

  3. .NET作品集：linux下的博客程序

    博客程序架构 本博客程序是博主11年的时候参考loachs小泥鳅博客内核开发的.net跨平台博客cms,距今已有6年多了,个人博客网站一直在用,虽然没有wordpress那么强大,但是当时在深究.ne ...

  4. PHP根据传入参数合并多个JS和CSS文件的简单实现

    HTML(使用方法): 复制代码代码如下: <link rel="stylesheet" type="text/css" href="cssmi ...

  5. github与git之间怎么建立连接

    git是一款强大的分布式版本控制系统,到底是什么意思呢?其实我也不知道,以后知道了再补上吧.下面咱们来讲一下github怎么与你电脑上的git建立起连接关系. 一.你要有一个github账号. 去百度 ...

  6. 树的平衡 AVL Tree

    本篇随笔主要从以下三个方面介绍树的平衡: 1):BST不平衡问题 2):BST 旋转 3):AVL Tree 一:BST不平衡问题的解析 之前有提过普通BST的一些一些缺点,例如BST的高度是介于lg ...

  7. salesforce零基础学习（八十四）配置篇： 自定义你的home page layout

    当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面.home页面简单的来说可以包括左侧(narrow component)和右侧(wide component)两部分 ...

  8. Server SQL 2008 习题

    [序言:学期末了,整理了自己这个学期学习数据库做的练习题,也是让自己复习了一遍.有错误的话希望大佬能够批评指正,不胜感激] 一.修改数据库 (1)给db_temp数据库添加一个数据文件文件db_tem ...

  9. Android 四大组件学习之ContentProvider四

    上节我们学习了怎样去读取系统短信以及插入一条短信到系统中. 本节我们学习怎样获取系统的联系人,以及插入一条联系人 好.废话不多说了,直接操作. 首先和读取短信一样,先找到联系人在数据库中的位置. wa ...

  10. Zend_Json 简介 --（手冊）

    1.  简单介绍 Zend_Json 提供一个方便的方式来串联(native的)PHP(的变量)和JSON,并将JSON(对象)解码到PHP中. 2.  基本使用方法 Zend_Json的使用包含使用 ...