<!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. 原型模式（Prototype）

    原型模式(Prototype) 原型模式虽然是创建型的模式,但是与工程模式没有关系,从名字即可看出,该模式的思想就是将一个对象作为原型,对其进行复制.克隆,产生一个和原对象类似的新对象.本小结会通过对 ...

  2. SSD: Single Shot MultiBoxDetector英文论文翻译

    SSD英文论文翻译 SSD: Single Shot MultiBoxDetector 2017.12.08    摘要:我们提出了一种使用单个深层神经网络检测图像中对象的方法.我们的方法,名为SSD ...

  3. C#使用ManagementObjectSearcher来获取系统信息时会有out of memory的异常

    在开发环境下,时不时出现out of memory的异常,最后是在服务界面重新启动 Windows Management Instrumentation后就好了.

  4. .NET Core快速入门教程 2、我的第一个.NET Core App（Windows篇）

    一.前言 本篇开发环境?1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core下载地址 ...

  5. 并发与并行的区别 The differences between Concurrency and Parallel

    逻辑控制流 在程序加载到内存并执行的时候(进程),操作系统会通过让它和其他进程分时段占用CPU(CPU slices)让它产生自己独占CPU的假象(同时通过虚拟内存让它产生独占内存的假象).在CPU在 ...

  6. Tomcat下载，新建自己的项目，模拟server

    一.tomcat下载 下载地址http://tomcat.apache.org/ 打开网页能够看到例如以下内容 在网页左边有Download以下就是能够下载的版本号.如6.0,7.0,8.0: 选择一 ...

  7. 工作中git 操作汇总

    1. git branch -l  查看本地branch 2. git reset --hard 回滚全部修改 3. git status  查看本地修改 4. git pull 更新代码 5. gi ...

  8. quick-cocos2d-x教程1:在window上创建第一个项目文件夹，并制作helloworld

    说明:此教程是针对cocos2dx 2.0系列的,3.0的版本号,如今还没有公布出来. 1)首先从github.com把这个项目下载到本地.然后装到d盘的根文件夹,并设置文件夹路径为d:\quick- ...

  9. MySQL远程訪问的两个问题

    安装MySQL后,不能远程訪问.进行例如以下配置就可以 连接后,依旧不能连接,报例如以下错误: 1042 - Can't get hostname for your address 解决方法在my.i ...

  10. Maven实战（九）——打包的技巧

    "打包"这个词听起来比較土.比較正式的说法应该是"构建项目软件包".详细说就是将项目中的各种文件,比方源代码.编译生成的字节码.配置文件.文档,依照规范的格式生 ...