how to change the colour property of tag used for a text

Question

i am using the following code to display a string in multiple lines and each line is underlined,but i want to change the colour of the underline tag and i want to use the text-align:justify property to display the text justified,but its not working properly.

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

i want there is a underline below the text and its color is blue and its width is 100% regardless of the width of the text.

how to modify the default color of the tag used to underline the text.

my css class

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

use `span` for it...`u` wont help you achieve your purpose!! — NoobEditor, Jan 03 '14 at 08:23
possible duplicate of [Changing Underline color](http://stackoverflow.com/questions/12557707/changing-underline-color) — Jukka K. Korpela, Jan 03 '14 at 09:55
This is about changing the color of underline, and it has been asked and answered several times at SO. — Jukka K. Korpela, Jan 03 '14 at 09:55

score 1 · Answer 1 · answered Jan 03 '14 at 08:21

Using word-break won't break your text into two lines, for that either you need to use <br /> tag, or you need to assign some short width to your p tag, secondly if you expect that it should justify than, it won't as there's only single word on a single line so don't expect CSS to space up the characters for you on a single line...

If you want to space up your characters, than you will have to use letter-spacing property

Demo

Here, in the above demo, I've assigned some fixed width to your p element, and than I just used a space for first word, just to show you that text-align: justify works well...

And, lastly, if you want to have a different underline color, you cannot customize that by simply using u tag, you need to use span around the words, with border-bottom property

Demo 2

enter image description here

@NoobEditor Well he selecte yours so voted you too :) – Mr. Alien Jan 03 '14 at 08:41 — Mr. Alien, Jan 03 '14 at 08:41

NoobEditor · Accepted Answer · 2014-01-03T08:42:26.820

0

i dont think you can change it that way....use span instead

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 (only text width line)

second demo (browser width line)

edited Jan 03 '14 at 08:42

answered Jan 03 '14 at 08:20

NoobEditor

15,563
19
81
112

i want to change only the underline colour not the text colour. – HimanshuSamantaray Jan 03 '14 at 08:23
please check the 2nd demo...ur text color is intact!! – NoobEditor Jan 03 '14 at 08:25
can you please heck my 2nd line in the code which is a string and should be displayed as multiline string and all line should be underline as you have done for the first line – HimanshuSamantaray Jan 03 '14 at 08:34
if you give the `html output` for 2nd line,i might be able to help....in present way, i don't know the output!! :) – NoobEditor Jan 03 '14 at 08:37
the 2nd line is nothing but a string value coming dynamically from the database,but i want to display it as multiple lines for which i have used the wordwrap property as you can see in my code,but the lines should also be displayed as like as the first line i.e it must be underlined and the underline colour must be blue and its width is 100%.it is lookwise just as you have done for the 1st line. – HimanshuSamantaray Jan 03 '14 at 08:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44388/discussion-between-noobeditor-and-himanshusamantaray) – NoobEditor Jan 03 '14 at 08:51
yes the output should be displayed like this,but in my case the string is coming from the database,which is a large string,i am using the wordwrap property to break it into different lines and be displayed as you have shown but with a little modification,the last line's underline width must be also 100%. – HimanshuSamantaray Jan 03 '14 at 08:55
This does not set underline at all but a bottom border. This, and a real underline color change, *can* be done whether `u` is used or not. – Jukka K. Korpela Jan 03 '14 at 09:57
@JukkaK.Korpela : i am eager to know how it can be done your way!! :) – NoobEditor Jan 03 '14 at 10:05
This question is a duplicate. Any efforts on improving answers should be focused on earlier questions, after reading their answers. – Jukka K. Korpela Jan 03 '14 at 12:23

Krish R · Answer 3 · 2014-01-03T08:26:48.707

0

Can you try this, Add 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;
}

Demo: http://jsfiddle.net/WQabG/2/

edited Jan 03 '14 at 08:26

answered Jan 03 '14 at 08:20

Krish R

22,583
7
50
59

score 0 · Answer 4 · answered Jan 03 '14 at 08:23

If you are able to put a span in you paragraph, you can try it like this:

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

score 0 · Answer 5 · answered Jan 03 '14 at 08:23

0

Try this :

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

answered Jan 03 '14 at 08:23

Mayur Tilva

160
8

score 0 · Answer 6 · answered Jan 03 '14 at 08:40

0

Is this help you??

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

answered Jan 03 '14 at 08:40

Deepu Sasidharan

5,193
10
40
97

how to change the colour property of tag used for a text

6 Answers6