zoukankan      html  css  js  c++  java
  • 几种处理文字的小技巧

      通过CSS可以对文字有很不错的处理效果。以下就简单的整理几种文字处理技巧。持续更新。

    一、文字溢出:text-overflow

      基本的式样如下:

    1 .huanhang {
    2   display: block;  /*必须是块级元素*/
    3   white-space: nowrap;  /*不换行*/
    4   text-overflow: ellipsis;  /*用省略号代表溢出*/
    5   overflow: hidden;  /*不允许出现滚动条*/
    6   width: 100px;  /*必须要指定宽度,才能知道在哪截断文字*/
    7 
    8 }

    当然兼容旧版Opera时不要忘记添加 前缀:  

    -o-text-overflow: ellipsis;

    对于溢出的文字,我们也可以有其它的处理方案:

    {
       text-overflow: ellipsis;  /*用省略号代表溢出*/ ;
       text-overflow: clip;  /*截断溢出文字*/
       text-overflow: string;  /*指定某个字符串来替代溢出部分*/

    二、文字分栏:column-count  、 column-gap 、 column-rule

    我们经常能在报纸上看到那种分栏的排版,其实在CSS3中也提供了将文字多列显示的属性:

    .duolie {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
    
      -moz-column-gap: 30px;
      -webkit-column-gap: 30px;
      column-gap: 30px;
    
      -moz-column-rule: 1px dashed black;
      -webkit-column-rule: 1px dashed black;
      column-rule: 1px dashed black;
    }
  • 相关阅读:
    Android 5.0新特性了解(一)----TabLayout
    Kafka生产者各种启动参数说明
    Kafka基础知识
    ONS发布订阅消息
    Spring异步事件
    Java动态代理机制
    Java线程间怎么实现同步
    技术架构实践三要点
    Distributed transactions in Spring, with and without XA
    Spring 中常用注解原理剖析
  • 原文地址:https://www.cnblogs.com/webARM/p/4339795.html
Copyright © 2011-2022 走看看