zoukankan      html  css  js  c++  java
  • CSS学习笔记:溢出文本省略(text-overflow)

    在CSS3中,text-overflow属性的基本语法如下:

    • clip:表示不显示省略文本,简单的裁切。
    • ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。
    • ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。

    实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应该在定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号效果

    案例:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7             dl{
     8                 width:240px;
     9                 border: solid 1px #ccc;
    10                 }
    11             dt{
    12                     padding:8px 8px;
    13                     background: #7fecad;
    14                     font-size: 13px;
    15                     text-align: left;
    16                     font-weight: bold;
    17                     color: #71790c;
    18                     margin-bottom: 12px;
    19                     border-bottom: solid 1px #efefef;
    20                 }
    21             dd{
    22                 font-size: 0.78em;
    23                 height: 1.5em;
    24                 width: 220px;
    25                 padding:2px 2px 2px 18px;
    26                 margin:2px 0;
    27                 white-space: nowrap;
    28                 overflow: hidden;
    29                 text-overflow: ellipsis;
    30             }
    31         </style>
    32     </head>
    33     <body>
    34         <dl>
    35             <dt>体育新闻</dt>
    36             <dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>
    37             <dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>
    38             <dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
    39             <dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>
    40             <dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>
    41             <dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
    42         </dl>
    43     </body>
    44 </html>

     效果:

  • 相关阅读:
    SNAT的作用是什么
    Maven命名规范收集
    Linux下Git命令中文显示乱码的问题解决:274232350256256346200273347273223
    HttpClient中文乱码问题排查
    Ubuntu 16.04通过NetworkManager(GUI)配置网桥
    HTML5 Video P2P技术研究(转)
    CentOS 6.9下KVM虚拟机快照创建、删除、恢复(转)
    CentOS 6.9下KVM虚拟机通过virt-clone克隆虚拟机(转)
    开源规则引擎 drools
    评估系统负载
  • 原文地址:https://www.cnblogs.com/lonelybonze/p/3984482.html
Copyright © 2011-2022 走看看