zoukankan      html  css  js  c++  java
  • css实现一行居中显示,两行靠左显示,超过两行以引号省略

    <!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>
  • 相关阅读:
    Android 使用MediaPlayer 播放 视频
    Android加载asset的db
    MAC SVN 基本设置 终端命令
    AFNetWork 简单实用demo
    IntelliJ IDEA导出Java 可执行Jar包
    Xcode快速排错
    Listview多tab上滑悬浮
    N最短路径分词
    进程监控工具supervisor
    nginx配置指南
  • 原文地址:https://www.cnblogs.com/LChenglong/p/6673125.html
Copyright © 2011-2022 走看看