CSS3网页布局之文字布局和文字超出处理

一、Css 文本水平方向展示

direction样式

ltr:文本流从左到右。默认

rtl:文本流从右到左

        .default {
            border: 1px solid blue;
            margin: 10px 0px;
            direction: ltr; /*默认,可以不需要设置*/
        }

        .revert {
            border: 1px solid yellowgreen;
            margin: 10px 0px;
            direction: rtl;
        }

显示效果:

 

二、Css文本垂直方向展示

writing-mode
writing-mode:horizontal-tb;//默认:水平方向,从上到下 
writing-mode:vertical-rl;  //垂直方向,从右向左
writing-mode:vertical-lr;  //垂直方向,从左向右
        .vertical1 {
            height: 250px;
            width: 100px;
            border: 1px solid green;
            writing-mode: vertical-lr;
            margin: 10px 0px;
        }

        .vertical2 {
            height: 250px;
            width: 100px;
            padding: 10px;
            border: 1px solid red;
            writing-mode: vertical-rl;
        }

显示效果:

 

三、 文字单行超出隐藏,文字多行超出隐藏

    /***单行超出***/
    .card-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /***固定行数超出***/
    .card-text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

 

   <div class="col-sm-4">
        <div class="card">
          <img src="http://www.jnqianle.cn/upload/logo/content/202007/30/5ab96858-5832-4930-9f92-0e6239cf37d2.jpg"
            alt="">
          <div class="card-body">
            <h5 class="card-title">
              美团下线支付宝,美团翅膀硬了,看看网友给美团的评语
            </h5>
            <p class="card-text text-muted">
              中国互联网发展到今天,形成了阿里、腾讯两大阵营,其他企业各自站队,并不令人乐见。王兴也曾非常希望可以同时得到腾讯和阿里的支持,但没有达成。此后,王兴逐渐走到了阿里的对立面。
            </p>
          </div>
        </div>
      </div>

显示效果:

 

更多:

CSS3网页布局之文字布局和文字超出处理 

Css 实现半圆进度条展示功能

CSS3实现文本垂直排列-writing-mode 

posted @ 2020-08-08 11:11  天马3798  阅读(742)  评论(0编辑  收藏  举报