大家好，欢迎来到【聚焦前端实战】系列专栏，我是江子麟。

在左右布局中，经常会出现这种CSS文字段落中单行靠右，多行靠左实现的需求，今天我们就来实现一下。

实现效果

单行效果：

多行效果：

具体代码

HTML代码：

<div class="introText">
   <p>{{user.introduction}}</p>
</div>

CSS代码：

.introText{
    width: 70%;
    text-align : right; // 单行文本居右显示
    display: inline-block;
    font-size: 14px;
    color: #ccc;
    p {
      display: inline-block; // 注意此处不能设置为block
      width: auto; // 必设
      text-align: left; // 多行文本居左显示
    }
  }