<!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. （新）elasticsearch6.0版本安装head插件

    ES6.0版本安装head插件 1.1 前言 不知道是我电脑问题还是最近的开源软件都比较**,mysql和elasticsearch新版本变动都比较大. elasticsearch6.0貌似已经不支持 ...

  2. linux 查看cpu个数，内存情况，系统版本

    查看cpu个数 总核数 = 物理CPU个数 * 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 * 每颗物理CPU的核数 * 超线程数 查看物理CPU个数 cat /proc/cpuinfo ...

  3. Ubuntu 17.04 安装

    不忘初心,方得始终. 今天听别人说17.04发布了,我是开心的不得了,赶紧下载了一个,准备安装在自己的本子上.这段时间已经花费了更多的时间在docker和OpenStack上面,没时间看新闻了,因此今 ...

  4. OGNL简介

    OGNL 一:OGNL简介 OGNL的全称是Object  Graph  Navigation  Language即对象导航语音.它是一个开源项目,工作在视图层,用来取代页面中的java脚本.简化数据 ...

  5. Mysql 的 IF 判断

    mysql自带很多判断逻辑,今天说一说IF的判断语句,正好今天做项目的时候也用到了 1. IF 判断 IF判断和我们代码里面写的有略微的差别,举个例子 IF('表达式','结果1','结果2')  如 ...

  6. pl/sql中if的用法

    /*判断用户从键盘输入的数字1.如何使用if语句2.接收一个键盘输入(字符串)*/set serveroutput on--接收一个键盘输入--num:一个地址值:含义:在该地址上保存了输入的值acc ...

  7. python用户管理系统

    学Python这么久了,第一次写一个这么多的代码(我承认只有300多行,重复的代码挺多的,我承认我确实垃圾),但是也挺不容易的 自定义函数+装饰器,每一个模块写的一个函数 很多地方能用装饰器(逻辑跟不 ...

  8. POJ 2367 topological_sort

    Genealogical tree Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2920 Accepted: 1962 Spe ...

  9. JAVA入门[9]-mybatis多表关联查询

    概要 本节要实现的是多表关联查询的简单demo.场景是根据id查询某商品分类信息,并展示该分类下的商品列表. 一.Mysql测试数据 新建表Category(商品分类)和Product(商品),并插入 ...

  10. Microsoft Graph Web应用程序极致开发体验

    作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...