CSS文字排版

一、CSS文字换行

1.字母换行：

word-wrap: break-word;

2.单词换行：

word-break: break-all;

3.文字换行：

white-space:pre-wrap;

 二、CSS文字不换行，超出部分显示省略号（...）

1.单行文本

overflow: hidden;  /* 文字长度超出限定宽度，则隐藏超出的内容 */

white-space: nowrap;  /* 设置文字在一行显示，不能换行 */

text-overflow: ellipsis;  /* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */

 2.多行文本

/* 类似flex纵向布局 */

display: -webkit-box; 

-webkit-box-orient: vertical;

 /* 盒子高度取（2）行，并自带省略号 */

-webkit-line-clamp:2; 

overflow :hidden;

 注：

• -webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• -webkit-line-clamp属性支持的浏览器如下所示：
  • 谷歌浏览器
  • 火狐浏览器
  • 苹果浏览器
  • Opera 

 三、CSS文字两端对齐或文字在容器中平均分布

1.多行文本时

text-align: justify;

案例：

<style>
    p{
        width: 100px;
        background-color: #ccc;
    }
    .p1{
        text-align: justify;
    }
</style>


<p>空空空</p>
<p>空空空空空空空空空</p>
<p class="p1">
    空空空空空空空空空
</p>

注：只有一行显示的时候这个属性是不起作用的。（使用了 word-break:dbreak-all这种强制换行的属性, 也是不起作用的)

2.只有一行文本时

text-align-last: justify;

案例：

<style>
    p{
        width: 100px;
        background-color: #ccc;
        text-align-last: justify;
    }
</style>

<p>空空空</p>
<p>空空空空</p>
<p>空空空空空空空空</p>

注：兼容性不好, 谷歌运行可以, 火狐、IE和safari浏览器没有效果且ios系统也不兼容。

/* ie写法 */
text-align: justify;
text-justify: inter-ideograph;

 兼容iOS与IE

案例1：利用占位标签（我一般用p标签或i标签）。

<style>
    div{
        width: 200px;
        margin: 10px;
        background-color: #ccc;
        height: 25px;
        line-height: 25px;
        text-align: justify;
    }
    div p{
        display: inline-block;
        width:100%;
    }
</style>

<div>空空空空<p></p></div>
<div>空空空空空<p></p></div>
<div>空空空<p></p></div>

案例2： 通过伪类after的方式，但但但是ie7及以下不支持伪类, 不能用该方法。

<style>
    div{
        width: 200px;
        margin: 10px;
        background-color: #ccc;
        height: 25px;
        line-height: 25px;
        text-align: justify;
    }
    div:after{
        content:'';
        display:inline-block;
        width:100%; /* 或者padding-left:100%; */
    }
</style>

<div>空空空空</div>
<div>空空空空空</div>
<div>空空空</div>

 四、文字竖排显示

writing-mode: vertical-lr | vertical-rl;

        - vertical-lr：在盒子左边竖排显示

        - vertical-rl：在盒子右边竖排显示

text-orientation: upright | mixed;

        - upright：将水平书写的字符自然布局（直排）

        - mixed：顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局

 案例1：文字竖排显示

<style>
    .mode{
        width: 200px;
        writing-mode: vertical-rl;
    }
</style>

<p class="mode">空空空</p>

 案例2：文字竖排显示 ，居中，均匀分布

<style>
    .mode{
        width: 200px;
        height: 200px;
        background-color: #eee;
        writing-mode: vertical-rl;
        text-orientation: upright;
        text-align-last: justify;

        /* 垂直居中，记得将下面伪类注释掉 */
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }
    .mode:before,:after{
        content:'';
        display:inline-block;
        width:100%;
    }
</style>

<p class="mode">空空空</p>