Как установить ярлык li с дополнительными символами?

Question

у меня есть стиль дизайна вы можете увидеть в: http://jsfiddle.net/mohammad6006/Q6g3n/

в результате вы видите тест 2, который находится в 2 линии

моя ширина DIV является 220px и я не хочу отобразить больше символов на другой линии

ИЛИ

когда Ли символы текста более 220px создать новую строку, но следующий дисплей Ли в другой линии

для более descirbe:

<li> 
    <a title="" href="">test2 test2 test2 test2 test2 test2 test2 test2 </a> 
</li> 
<li> 
    <a title="" href="">test 3</a> 
</li> 

test2 test2 test2 test2 test2 test2 test2 test2 cahracters более чем в одной строке так лишние символы отображаются в новой строке и тест 3 дисплея Li в другой линии тоже

оправдание за плохой английский

Answer 1

Вы можете использовать min-height, поэтому он использует вашу высоту 28px как базу, а остальная часть может расширять ее.

Вы должны установить ваш #body-right ul li {}
из
#body-right ul li {height:28px;}
в
#body-right ul li {min-height:28px;}

Обновлено JsFiddle

Answer 2

here is a fiddle

/css: min-height ist the solution 

также я удалить фоновое изображение и заменить его (потому что нет никаких оснований для использования и изображения)

/css: border-bottom:1px solid red; 

Answer 3

использовать этот CSS:

Удалить стиль «высота: 28px» от # body-right ul li т.е.

#body-right ul li { 
     background: url("../images/blog-body-right-line.png") no-repeat scroll center bottom rgba(0, 0, 0, 0); 
     direction: rtl; 
     line-height: 28px; 
     list-style: none outside none; 
     text-align: right; 
     word-wrap:break-word; 

}