如何更改用于文本的 <u> 标记的颜色属性答案

【问题标题】：how to change the colour property of <u> tag used for a text如何更改用于文本的 <u> 标记的颜色属性
【发布时间】：2014-01-20 20:53:25
【问题描述】：

我正在使用以下代码在多行中显示一个字符串，并且每行都带有下划线，但是我想更改下划线标记的颜色，并且我想使用 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%;
}

【问题讨论】：

使用span 为它...u 不会帮助你达到你的目的！！
Changing Underline color 的可能重复项
这是关于改变下划线颜色的问题，在SO已经问过好几次了。

标签： html css laravel-4

【解决方案1】：

我不认为你可以那样改变它....改用span

html, body {
    width:100%; /* make sure this is present in your css, else 100% wont work */
}
p.test {
    width:100%; /* this is dependent on parents width */
    word-wrap:break-word;
    text-align: justify;
    line-height:200%;

}
p.test > span {
    display:block;
    width:100%;
    padding-bottom:3px; /* how low underline should be */
    border-bottom:1px solid blue; /*underline color*/
    color:red; /*text color*/
    text-align:justify;
}

HTML

<p class="test"><span><b>Uitgevoerde werkzaamheden</b></span>

</p>

demo（只有文字宽度线）

second demo （浏览器宽度线）

【讨论】：

我只想更改下划线颜色而不是文本颜色。
请检查第二个演示...你的文字颜色完好！
你能不能看看我在代码中的第二行，它是一个字符串，应该显示为多行字符串，并且所有行都应该像第一行一样加下划线
如果你在第二行给出html output，我也许能帮上忙……以目前的方式，我不知道输出！！ :)
第二行只不过是一个来自数据库的动态字符串值，但我想将其显示为多行，正如您在我的代码中看到的那样，我使用了 wordwrap 属性，但是线条也应该像第一行一样显示，即必须加下划线，下划线颜色必须为蓝色，宽度为 100%。就像第一行一样。

【解决方案2】：

你可以试试这个吗，加div u

p.test{
   width:100%; 
   word-wrap:break-word;
   text-align: justify;
   line-height:200%;
   text-decoration: none; 
   border-bottom: 1px solid green;
}

div u{
   text-decoration: none; 
   border-bottom: 1px solid green;
}

演示： http://jsfiddle.net/WQabG/2/

【讨论】：

【解决方案3】：

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

如果你想为你的角色分配空间，那么你必须使用letter-spacing 属性

Demo

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

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

Demo 2

【讨论】：

@NoobEditor 好吧，他选择了你的，所以也投给了你 :)

【解决方案4】：

如果您能够在段落中添加一个跨度，您可以这样尝试：

HTML

<p class="test"><span>Uitgevoerde werkzaamheden</span></p>

CSS

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

p.test > span {
border-bottom: 1px solid blue;
}

Fiddle

【讨论】：

【解决方案5】：

试试这个：

p.test, p.test u {
color:green;
text-align:justify
}

【讨论】：

【解决方案6】：

这对你有帮助吗？

 <head>
<style>
p.test{
    line-height:200%;
}
hr { 
border-color: blue;
margin-top: -20px;
}
</style>
</head>
<body>
<p class="test"><b>Uitgevoerde werkzaamheden</b></p>
<hr>
</body>

【讨论】：