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;
    }
  • 相关阅读:
    UI Automator Viewer工具的使用
    SQL数据库面试50题(转载)
    Python +selenium+pycharm(Windows)
    python安装及环境变量配置(Windows)
    JDK的安装与环境变量配置
    shell参数
    文件添加行号
    CentOS 7修改UTC为CST
    shell控制超时
    fio笔记
  • 原文地址:https://www.cnblogs.com/webARM/p/4339795.html
Copyright © 2011-2022 走看看