Как не дать тексту тега «a» вылезти за рамки родительского дива?

Question

[ILoveYAnny]

Добрый день. Не первый раз встречаюсь с проблема текста в теге "a" когда текст вылезает за границы родительского элемента. Как сделать что бы он либо пропорционально уменьшался, либо переносился на другую строку ? Помогите пожалуйста.

Вот конкретно пример, в этом элементе

<div class="mainmenu">
<ul>
<li class=" buttonleftmen2"><a href="#">Текст</a></li>
</ul>
</div>

Происходит следующее :


Стили :

.mainmenu {
  width: 53%;
  display: inline-block;
  float: left;
  position: relative;
  left: -8px;
}

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu ul li {
  margin-bottom: 20px;
  text-align: left;
 width: 113%;

#cssmenu > .mainmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  transition: color .2s ease;
  width: 10px;
}

Answer 1

[Алексей Уколов]

Вот так:

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

Пример

Comments

[ukoHka]

В данном случае это надо применить к самому тегу , а не к родителю.
http://jsfiddle.net/8hv65o2x/

[Алексей Уколов]

Применять надо к тому блоку, у которого ширина фиксированная. В данном случае, действительно, это сама ссылка.

Answer 2

[Serdji]

Основному блоку, в котором текст, задай параметр в CSS overflow: hidden;

Comments

[ILoveYAnny]

Тогда половина текста просто скроется, будет не "ТЕКСТ", а "ТЕК" - это по вашему приемлемое решение ?)

[fedot1325]

Ширину ul задайте фиксированную. Кстати от cursor pointer на a нет никакого смысла, он там и так поинтен.

[Алексей Уколов]

fedot1325: если, конечно, до этого он где-то не переопределен.

[ILoveYAnny]

fedot1325: Не помогает :(