@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>


Скриншот страницы сайта
zHGNAA4oTrqyTbMO-N623A.png

Как видите название карты съезжает, так что хотелось бы добавить параметр, чтобы картам у которых название содержит более 8-10 символов дописывалось 3 точки в конец
  • Вопрос задан
  • 6986 просмотров
Пригласить эксперта
Ответы на вопрос 4
Ahen
@Ahen
Универсальный дилетант
Ответ написан
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
На js это делается так https://jsfiddle.net/5ekucLh3/1/
Ответ написан
Комментировать
i_d_1
@i_d_1
Программист PHP
overflow: hidden;
text-overflow: ellipsis;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы