Question

如何更改包装文本行的颜色和对齐方式？基本上，我有一个div与一些内容，如果文本包装因为空间问题。然后，我希望第二行是绿色并右对齐。

我创造了一个简单的小提琴..需要第二行是正确的对齐和颜色变化。

SCSS：

.heading {
    font-size: 40px;
        &:first-line {
            color: red;
        }
 }

HTML：

<div class="heading">
    this is a test for wraping text in multiple line. testing
</div>

jsfiddle

由于

Answer 1

试试这个：

＆＃13;

.heading{
  font-size: 40px;
  color:green;
  text-align-last:right;
}

.heading:first-line{
  color:initial;
}

＆＃13;

<div class="heading">
   this is a test for wraping text in multiple line. testing
</div>

＆＃13;

Answer 2

Css选择器仅允许选择第一行。但是，有一个名为lining.js的库允许您获得的结果。以下是应解决您问题的代码段。

HTML：

<div class="heading" data-lining>
   this is a test for wraping text in multiple line. this is some additional text to show the wrapping effect.
</div>
<script src="https://cdn.rawgit.com/zmmbreeze/lining.js/7077712b/build/lining.min.js"></script>

SCSS：

.heading {
     font-size: 40px;
     .line:nth-of-type(2) {
         color:green;
         text-align:right;
       }
  }

https://jsfiddle.net/6rLno8ht/95/

希望这有帮助！

如何更改换行文本-css的颜色和对齐方式

2 个答案: