Как сделать три точки если слишком длинный текст?

Question

[kickbokser]

Всем привет, установил я мониторинг игровых серверов и есть небольшая проблема. Тут к длинному названию сервера (*serv_top:hostname*) добавляется три точки в конец, чтобы не портить общую картину. А в названии карты (*serv_top:map*) почему-то такого нет и я понять не могу как это сделать) Подскажите пожалуйста

Код

<div class="row top_list">
<!--{*num_top*}-->
{?*serv_top*}
	{%*serv_top*}
		<div class="top_item">
			<div class="top_title">
				<a href="/server/{*serv_top:id*}/">{*serv_top:subr_hostname*}{?!*serv_top:hostname*}Сервер отключен{*serv_top:hostname*?!}</a>
			</div>
			<img src="{*serv_top:map_img*}" class="map_img"/>
			<div class="top_info">
				<div class="ip">IP: {*serv_top:address*}</div>
				<font class="info-left"><img src="/tpl/boost-servers/assets/img/map.png" style="margin-bottom: -2px;"> {*serv_top:map*}{?!*serv_top:map*}no map{*serv_top:map*?!}</font> 
				<font class="info-right"><img src="/tpl/boost-servers/assets/img/players.png" style="margin-bottom: -2px;"> {*serv_top:players*}/{*serv_top:maxplayers*}</font>
			</div>
		</div>
	{*serv_top*%}
{*serv_top*?}
{?*empty_slot*}
	{%*empty_slot*}
		<div class="top_item">
			<div class="top_title">МЕСТО СВОБОДНО </div>
			<img src="/main/maps/no_map.jpg" class="map_img"/>
			<div class="top_info">
				<div class="ip">IP: 127.0.0.1:27015</div>
				<font class="info-left"><img src="/tpl/boost-servers/assets/img/map.png" style="margin-bottom: -2px;"> -----</font> 
				<font class="info-right"><img src="/tpl/boost-servers/assets/img/players.png" style="margin-bottom: -2px;"> --/--</font>
			</div>
		</div>
	{*empty_slot*%}
{*empty_slot*?}
</div>

Скриншот страницы сайта

Как видите название карты съезжает, так что хотелось бы добавить параметр, чтобы картам у которых название содержит более 8-10 символов дописывалось 3 точки в конец

Answer 1

[Сережа Ахен]

htmlbook.ru/css/text-overflow

Answer 2

[Олег]

На js это делается так https://jsfiddle.net/5ekucLh3/1/

Answer 3

[Андрей Прозоров]

overflow: hidden;
text-overflow: ellipsis;

Answer 4

[novrm]

PHP # truncate text with saving html structure and...