Текст выходи за пределы блока

[Pato]

Помогите решить проблему, текст ссылки выходит за пределы блока, а нужно чтобы он переходил на новую строку

вот такой код

<div class="sidebar" id="sideLeft">
			<div class="blk">
                <div class="zagolovok"><h3>Навигация</h3></div>                   
                    <div class="link"><a href="">Категория</a></div>
                    <div class="link"><a href="">Категория</a></div>
                    <div class="link"><a href="">Категория</a></div>
                    <div class="link"><a href="">КатегорияКатегорияКатегориярияКатегория</a></div>
            </div>
		</div

.blk {padding:0 0 10px 0;background: #1a1a1a;}
.zagolovok {background: url(../images/zag.png) no-repeat;height:40px;margin:0 0 8px 0;}
    .blk h3 {font-family:Myriad Pro Cond; font-weight: bold; text-transform: uppercase; font-size:17px; padding:12px 0 0 15px; color:#000; text-shadow: black 0px 1px 0px, inherit 1px 0 0; }
    .link {background: url(../images/li_top.png) no-repeat 10px 8px; padding:5px 0 0px 30px;  border-bottom:1px dotted #0f0f0f; } 
        .link a {color:#fff; font-family: Arial; text-decoration: none;}
            .link a:hover {text-decoration: underline;}

Edited September 20, 2012 by Pato

[Great Rash]

Проблемы нет. Это нормальное поведение. Таких длинных слов нет в природе, поставьте пробелы и все станет ок.

[wwt]

метоксихлордиэтиламинометилбутиламиноакридин

ЗЫ есть такое не валидное и не входящее в стандарты свойство word-wrap

.text {
   word-wrap:break-word;
}

и CSS3 свойство word-break

.text {
   word-break: break-all;
}

перенос слова если оно не вмещается в ширину блока.

Edited September 20, 2012 by wwt

[Барабанщик]

Можно, разве что, обрезать вылезающий текст

.link {
ext-overflow: clip;
overflow: hidden;
}

Но, лучше не создавать длинные строки текста без пробела.

[Great Rash]

Тогда уж:

.link {
  overflow: hidden;
  text-overflow: ellipsis;
}

Работает вообще везде (может кроме мобил).