代码之家 › 专栏 › 技术社区 › user2570135

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

sass css

user2570135 · 技术社区 · 7 年前

如何更改换行文本的颜色和对齐方式?。基本上,我有一个带有一些内容的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

谢谢

2 回复 | 直到 7 年前

Ehsan 7 年前

试试这个:

.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>

Rishi S 7 年前

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/

希望这有帮助!

推荐文章

ineedtoknow · 如何以重复模式(蓝色、紫色、红色)为儿童应用背景色[重复]

9 月前

user p · 如何修复Angular Material侧边栏的滚动问题

10 月前

Samvel · 无法通过sass模块编译scss文件

1 年前

Frankey · :not()CSS伪类未按预期工作

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Ch. · scs中@media的误导最小宽度和最大宽度

1 年前

Yiu Chak · 错误:“…m 55%在右侧”后无效CSS

1 年前

Sudeepa T · 无法定位元素[重复]

1 年前

kold-kreator · 编辑Bootstrap 5卡盒阴影的SASS

1 年前

JuliaBland299 · 如何使链接不占用网格中的空间?

1 年前