Вы наверняка не раз видели, что в колонке, к примеру, с названиями последних топиков на форуме порой происходят неприятные метаморфозы. Выглядит это примерно так (с вашего позволения немного симулирую :)).
- Проблемы с новым компью…
- Почему не работает float:le…
- Как решиться жениться за…
Неопрятно, правда? Есть куча решений, но мне в голову пришло ещё одно (может не только мне?).
Сначала посмотрите реализацию моей идеи. Посмотреть можно нажав сюда.
Теперь выясняем что нам нужно из инструментов:
- переменная, к примеру, $nametopic[2];
- png’шка (она расположена тут);
- средство человеческой обработки PNG для IE5-6 (я использую CSS — expression);
- код, который вы увидите ниже;
Я поставил себе задачу сделать красивое решение для ситуации, когда нужно укорачивать длинные названия без потери смысловой нагрузки и приятного внешнего вида.
Это простая схема того, как я решил эту задачу. Ниже код.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en» >
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />
<title>absolvo.ru</title>
</style>
<style type=»text/css»>
body {
background:#fff;
}
h2 {
background:#fff;
font:18px verdana, serif;
margin:0;
position: relative;
overflow: hidden;
width: 200px;
white-space:nowrap;
}
div {
background:#fff;
font:18px verdana, serif;}
h2 span {
position: absolute;
left:100px;
width: 100px;
height: 20px;
background: url(http://absolvo.ru/tmp/1/bg.png);
background-position: right;
background-repeat: no-repeat;}
.png { filter:expression(PNG(this)) }
</style>
<!— Для любимых IE5-6 —>
<script language=»javascript» src=»png.js»></script></head>
<body>
<h2 title=»<?php echo $nametopic[2]; ?>»><span class=»png»></span><?php echo $nametopic[2]; ?></h2>
<div><?php echo $nametopic[2]; ?></div>
</body>
</html>
Мне видится это хорошим решением.