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

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

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/

希望这可以帮助！

Answer 2

尝试这个：

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

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