Justify single line of text not working

Question

I need to Justify single line text and I had this issue in past and resolved it with the help of solution on Stack Overflow website

I can't justify single line text using CSS in asp.net

Now i have to do a similar thing which is not work i have put the code on Fiddle i tried even the above solution this is not working also.

May be i am doing some mistake which is not noticible to me. I am a developer by profession but have to do do design job as well on current projects

Fiddler Link http://jsfiddle.net/pp9hb/2/

This is for an ASP.Net website developer using web form & c#.

SOLUTION: Below CSS is working for me. It is now Justifying text in all browsers

.Top10ArticleHeading
{
   text-align:Justify; 
   font-size:11px; 
    font-family:Tahoma, Geneva, sans-serif;  
    height:16px;
    color:black;
    padding-top:2px;
    text-decoration:none;
    width:160px;
}
.Top10ArticleHeading:after 
{
  content: "";
  display: inline-block;
  width: 100%;
}

@Clark: I mistake I need to Justify single line text..which actually is the text next to each number as show in example — Learning, Apr 05 '12 at 08:18
To be honest.. that should be a table, not a massive amount of divs. — Kyle, Apr 05 '12 at 08:23
Apparently this: http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div/6637398#6637398 works cross-browser. — powerbuoy, Apr 05 '12 at 08:25
@Kyle: Can you please justify your comment. I loved to work with table but more & more people stress on using DIV. so where should we use DIV & Where to use Tables. for Tabular data it is better to use table... — Learning, Apr 05 '12 at 11:52

score 3 · Answer 1 · answered Apr 05 '12 at 08:48

Hi you define this css stylesheet as like this

Css p, h1 {text-align: justify; text-align-last: justify;}

p:after, h1:after
{content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;}


h1
{height: 1.1em;
line-height: 1.1;
background:green;}

HTML

<h1>This is heading </h1>


<p>hello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo texthello demo text</p>

now more information about this http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

Across All browsers i ma facing this issue – Learning Apr 05 '12 at 10:58 — Learning, Apr 05 '12 at 10:58

score 0 · Accepted Answer · answered Apr 08 '12 at 11:05

SOLUTION: Below CSS is working for me. It is now Justifying text in all browsers

.Top10ArticleHeading
{
   text-align:Justify; 
   font-size:11px; 
    font-family:Tahoma, Geneva, sans-serif;  
    height:16px;
    color:black;
    padding-top:2px;
    text-decoration:none;
    width:160px;
}
.Top10ArticleHeading:after 
{
  content: "";
  display: inline-block;
  width: 100%;
}

Justify single line of text not working

2 Answers2