Пробел в конце строки
Особо никогда не нужно было, а сейчас встал вопрос ребром: хочу запретить перенос коротких фраз. Т.е. у меня есть "способность и неспособность", которая переносится на одном из пробелов, а надо бы, чтобы переносилась вся фраза.
Надеюсь, понятно описал проблему.
Надеюсь, понятно описал проблему.
Что то я не совсем понял вопрос.
Как на счет неразрывных пробелов между слов.
Как на счет неразрывных пробелов между слов.
Если фраза в конце строки, то одно из слов переносится (по ширине блока), но мне не хочется, чтобы фраза разрывалась. Если вдруг случается так, что фраза в конце не влезает в строку, переносится, то хотелось бы, чтобы переносилась она целиком, а не по одному слову.
Можно также поставить <br /> перед фразой, или заключить фразу в <span style="white-space: nowrap".
О! Направление нужное. Теперь подскажите, как реализовать такую штуку:
[HTML]
<li style="white-space:nowrap;display:inline;">Первый пункт</li>
<li style="white-space:nowrap;display:inline;">Второй пункт</li>
[/HTML]
В опере список вылезает за пределы блока и не переносится вообще. В ИЕ вроде всё так, как хотелось бы. Пробовал между пунктами вставлять - не помогло.
[HTML]
<li style="white-space:nowrap;display:inline;">Первый пункт</li>
<li style="white-space:nowrap;display:inline;">Второй пункт</li>
[/HTML]
В опере список вылезает за пределы блока и не переносится вообще. В ИЕ вроде всё так, как хотелось бы. Пробовал между пунктами вставлять - не помогло.
Не уверен, что это именно то, что нужно, но вот такой вариант:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<style type="text/css">
ul li {
width: 50px;
}
ul li span {
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: 300px; border: solid 1px green">
<ul>
<li>Первый пункт</li>
<li><span>способность и неспособность</span></li>
</ul>
</div>
<hr />
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<style type="text/css">
ul li {
width: 50px;
}
ul li span {
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: 300px; border: solid 1px green">
<ul>
<li>Первый пункт</li>
<li><span>способность и неспособность</span></li>
</ul>
</div>
<hr />
</body>
</html>
Всё верно. Я так и сделал. Но если список расположен в одну строку и каждый пункт сам по себе неделим, то в Опере все элементы списка вытягиваются в одну строку и не переносятся никак.
А вот так:
Вообще покажите код страницы, легче будет понять, что собственно нужно.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<style type="text/css">
ul li {
display: inline;
font-size: 12pt;
}
ul li span {
display: inline-block;
float: left;
width: 50px;
margin: 12px;
}
ul li span.nowrap {
width: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: auto; border: solid 1px green">
<ul>
<li><span>Первый пункт</span></li>
<li><span class="nowrap">способность и неспособность</span></li>
<li><span>Третий пункт</span></li>
</ul>
<div style="width: auto; height: 1px; overflow: hidden; clear: both;"> </div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<style type="text/css">
ul li {
display: inline;
font-size: 12pt;
}
ul li span {
display: inline-block;
float: left;
width: 50px;
margin: 12px;
}
ul li span.nowrap {
width: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: auto; border: solid 1px green">
<ul>
<li><span>Первый пункт</span></li>
<li><span class="nowrap">способность и неспособность</span></li>
<li><span>Третий пункт</span></li>
</ul>
<div style="width: auto; height: 1px; overflow: hidden; clear: both;"> </div>
</div>
</body>
</html>
Вообще покажите код страницы, легче будет понять, что собственно нужно.
[HTML]
span {display:inline-block;}
[/HTML]
Это ключ. Спасибо, очень помог. Как всегда ;)
span {display:inline-block;}
[/HTML]
Это ключ. Спасибо, очень помог. Как всегда ;)