Question

I have the following html

<td valign="top" id="oddnumberedcolumns"> 
     <div><a><span class="myspan">line 1 without linebreak</span></a></div> 
     <div><a><span class="myspan">line 2 without linebreak</span></a></div>   
</td> 
<td valign="top" id="oddnumberedcolumns"> 
     <div><a><span class="myspan">A very looooooong line 3&#039;which results in a line break due defined width of table column</span></a></div> 
</td>

CSS:

font-weight: normal;
color: #333 !important;
font-size: 11px;
line-height: 22px;
border-collapse: separate;
border-spacing: 2px;
font-family: Verdana, sans-serif;

My problem is that is distance between line 1 & 2 is the same as line 3 that is “line break” so it looks there is four links where is actually only 3 links. How do I minimize the distance between the letters in line 3 when it “breaks” and leave the distance between line 1 & 2 as is.
I would prefer change it in css and leave the html as is.
Hope you understand what i mean by “line break” – i am perhaps mistreating it a bit…

Answer 1

in this case you can set a bottom-margin on the div to give space between the first two links and lower your line-height on the td from 22px to something a little higher than the font-size

example: http://jsfiddle.net/qwane/

td {
    font-weight: normal;
    color: #333 !important;
    font-size: 11px;
    line-height:15px;
    padding:10px 0;
    border-collapse: separate;
    border-spacing: 2px;
    font-family: Verdana, sans-serif;
    width:300px;
}
div {margin-bottom:11px;}