Чтобы в двухсловных пунктах меню второе слово переносилось на вторую строку

Squidward · October 28, 2011

Задача: в двухсловных пунктах меню второе слово должно переноситься на вторую строку (см. рисунок ниже). По ширине ограничений для li или a не ставится (на основе этого реализовать перенос не получится, см. опять же рисунок). Тегов <br /> и прочих вручную между слов не вставить, это CMS. Как можно сделать? Причем нужно, чтобы выравнивались слова по низу (см. опять же рисунок).

Edited October 28, 2011 by Squidward

Great Rash · October 28, 2011

Без <br> никак.

Squidward · October 28, 2011

А по яваскрипту спецов нет? Как сделать, чтобы в пунктах меню пробел (не ; , а именно пробел) заменялся на br?

Great Rash · October 28, 2011

Регулярное выражение.

Cubka · October 28, 2011

Может подойдёт такое:

<style type="text/css">
* { margin: 0; padding: 0;}
ul{list-style: none; padding:15px; }
ul li { border: 1px solid #ccc; display: inline-block; height: 55px; padding: 5px; }
ul li span {white-space: pre;text-align:left;}
ul li p {padding-top: 20px;}
</style>
</head>
<body>      
<ul>
<li><p>Одно</p></li>
<li><p>Одно</p></li>
<li><span>Два 
слова</span></li>
<li><span>Два 
слова</span></li>
</ul>
</body>

Squidward · October 28, 2011

Cubka, вы перенесли слово "слова" на новую строку и, соответственно, добавили непечатаемый символ абзаца. Да, так переносится, однако руками внутрь ссылок ничего добавить нельзя, это CMS. И еще у вас одни <a> завернуты в <p>, а другие в <span>. Так тоже не получится сделать.

hedgehog · October 28, 2011

а так нельзя?


li {
  display: inline-block;
  height: 2em;
  vertical-align: bottom;
}

Sign In

Чтобы в двухсловных пунктах меню второе слово переносилось на вторую строку

Question

Squidward

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Squidward

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Cubka

Link to comment

Share on other sites

Squidward

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information