zoukankan      html  css  js  c++  java
  • 文字超过三行显示省略号...,文字两端对齐,设置文字间距

    文字超过三行显示省略号...,文字两端对齐,设置文字间距

     .textwrap .news {
      /* 省略号主要代码 */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /* 几行后显示省略号 */
      -webkit-line-clamp:4;
      -webkit-box-orient: vertical;
      /* 文字两端对齐 */
      text-align: justify;
      /* 设置文字间距 */
     letter-spacing:2.4px;
    }
    

    超过一定宽度展示省略号

    .anyone{
    120px;
    overflow:hidden;
    white-space:nowrap;/*限制不换行*/
    text-overflow:ellipsis;
    }
    

    首行缩进(小程序text标签无效应作用于在view标签上)

    text-indent: 70rpx;
    

    处理文字断行

    1. word-break:break-all; 只对英文起作用,以字母作为换行依据
    2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
    3. white-space:pre-wrap; 只对中文起作用,强制换行
    4. white-space:nowrap; 强制不换行,都起作用
    5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行,超出部分隐藏且以省略号形式出现
  • 相关阅读:
    一些开发中用到的注解
    ios下设置user-scalable=no无效
    git的使用
    mongoose操作
    mongodb常用命令
    node express安装
    弹窗
    css实现全图滚动
    前端小技巧
    实现移动端轮播图
  • 原文地址:https://www.cnblogs.com/chenluqing/p/11377256.html
Copyright © 2011-2022 走看看