html - 如何更改用于文本的 <u> 标签的颜色属性

Question

我正在使用以下代码在多行中显示一个字符串并且每行都带有下划线，但是我想更改下划线标记的颜色并且我想使用 text-align:justify 属性来显示对齐的文本，但它不能正常工作。

<div>
        <u><b>Uitgevoerde werkzaamheden</b></u>
        <u><p class="test">{{{$werkbon_report->work_preformed}}}</p></u>
</div>

我希望文本下方有一条下划线，颜色为蓝色，宽度为 100%，无论文本的宽度如何。

如何修改用于文本下划线的标签的默认颜色。

我的 CSS 类

 p.test{
    width:100%; 
    word-wrap:break-word;
    text-align: justify;
    line-height:200%;
}

Answer 1

使用 word-break不会将您的文本分成两行，因为您需要使用 <br />标签，或者你需要分配一些短的 width到你的p标记，其次，如果您期望它应该证明比，它不会因为一行中只有一个单词所以不要期望 CSS 会在一行中为您分隔字符...

如果你想给你的字符留出空间，那么你将不得不使用 letter-spacing属性

Demo

在这里，在上面的演示中，我分配了一些固定的 width到你的p元素，而不是我只是在第一个词中使用了一个空格，只是为了向您展示 text-align: justify效果不错……

最后，如果你想要不同的下划线颜色，你不能通过简单地使用 u 来自定义它。标签，你需要使用 span围绕的话，用border-bottom属性

Demo 2