Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Автоматическое скрытие длинных текстовых подписей  [new]
Alibek B.
Member

Откуда:
Сообщений: 3015
Есть такой фрагмент (элементы списка представляются в виде вкладок):
<li><a href="#tab1" role="tab" data-toggle="tab"><i class="fa fa-map"></i><span class="details">map long text</span></a></li>
<li><a href="#tab2" role="tab" data-toggle="tab"><i class="fa fa-car"></i><span class="details">car long text</span></a></li>
...

На странице это выглядит как страница с вкладками, где на вкладках изображен значок и текст.
Когда окно браузера недостаточной ширины, то вкладки переносятся и выглядят не очень красиво.
Поэтому при недостаточной ширине я отображаю только значки, без текста:
.nav-tabs .details {padding-left: 0.5ex;}
@media (max-width: 700px) {
.nav-tabs .details {display: none;}
}

Ширину я подобрал экспериментально и добавил чуть сверху.
Но мне бы хотелось более умное поведение — чтобы при недостаточной ширине окна текстовые подписи автоматически скрывались так в определенном порядке, чтобы вкладки никогда не переносились.
Можно ли такое сделать без JS, средствами только CSS?
16 янв 18, 00:05    [21109215]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B., пример тестовый с твоими текстами дай, дабы нам их не выдумывать.

Можно попробовать использовать Flexbox, как вариант...
16 янв 18, 09:08    [21109463]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B., вот есть пример "обрезания"...
http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro
http://theory.phphtml.net/css/text-overflow.html
16 янв 18, 09:11    [21109470]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
Alibek B.
Member

Откуда:
Сообщений: 3015
Нет, overflow это совсем другое, мне нужно не содержание обрезать, а скрыть часть информации при недостатке места.
Вот рабочий пример: https://jsfiddle.net/184nu5eL/1/
Если уменьшать ширину окна браузера, то в определенный момент все текстовые подписи на закладках будут скрыты, останутся только значки. Но сейчас это просто условие по ширине окна меньше 700 пикселов.
Мне бы хотелось сделать так, что когда закладки с текстом перестают умещаться в одну строку, их текстовые подписи скрывались, либо по очереди (это было бы вообще идеально), либо одновременно; исходя не из ширины окна, а из ширины родительского контейнера.
16 янв 18, 11:10    [21109858]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B.
мне нужно не содержание обрезать, а скрыть часть информации

Пока разницы не вижу...
16 янв 18, 13:25    [21110441]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B.
Вот рабочий пример: https://jsfiddle.net/184nu5eL/1/

Он не "локализуется". Пример ниже не выглядит так же, как по твоей ссылке.

+
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#route-list .nav-tabs .details {
	padding-left: 0.5ex;
}
@media (max-width: 700px) {
	#route-list .nav-tabs .details {
		display: none;
	}
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<script src="https://use.fontawesome.com/a0010241a3.js"></script>
<div>
	<strong>Способы проезда</strong>
	<div id="route-list">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#route-home" aria-controls="route-home" role="tab" data-toggle="tab"><i class="fa fa-map-o" aria-hidden="true"></i><span class="details">на месте</span></a></li>
			<li role="presentation"><a href="#route-car" aria-controls="route-car" role="tab" data-toggle="tab"><i class="fa fa-car" aria-hidden="true"></i><span class="details">автомобилем</span></a></li>
			<li role="presentation"><a href="#route-taxi" aria-controls="route-taxi" role="tab" data-toggle="tab"><i class="fa fa-taxi" aria-hidden="true"></i><span class="details">такси</span></a></li>
			<li role="presentation"><a href="#route-bus" aria-controls="route-bus" role="tab" data-toggle="tab"><i class="fa fa-bus" aria-hidden="true"></i><span class="details">автобусом</span></a></li>
			<li role="presentation"><a href="#route-rail" aria-controls="route-rail" role="tab" data-toggle="tab"><i class="fa fa-train" aria-hidden="true"></i><span class="details">поездом</span></a></li>
			<li role="presentation"><a href="#route-air" aria-controls="route-air" role="tab" data-toggle="tab"><i class="fa fa-plane" aria-hidden="true"></i><span class="details">самолетом</span></a></li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="route-home">
				Маршрут на месте
			</div><!-- /#route-home -->
			<div role="tabpanel" class="tab-pane" id="route-car">
				Маршрут на автомобиле
			</div><!-- /#route-car -->
			<div role="tabpanel" class="tab-pane" id="route-taxi">
				Маршрут на такси
			</div><!-- /#route-taxi -->
			<div role="tabpanel" class="tab-pane" id="route-bus">
				Маршрут на автобусе
			</div><!-- /#route-bus -->
			<div role="tabpanel" class="tab-pane" id="route-rail">
				Маршрут на поезде
			</div><!-- /#route-rail -->
			<div role="tabpanel" class="tab-pane" id="route-air">
				Маршрут на самолете
			</div><!-- /#route-air -->
		</div>
	</div>
</div>
</body>
</html>
16 янв 18, 13:27    [21110452]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
Alibek B.
Member

Откуда:
Сообщений: 3015
krvsa
Он не "локализуется". Пример ниже не выглядит так же, как по твоей ссылке.

Наверное это FontAwesome так борется против использования своего CDN.
Тогда так: https://jsfiddle.net/184nu5eL/2/ (вместо значков буквы в квадратных скобках)

krvsa
Пока разницы не вижу

overflow — это когда содержимое не умещается в контейнер и нужно определить, что делать с непомещающейся частью.
А у меня немного другая ситуация — в контейнере есть важные и неважные элементы, важные нужно отображать всегда, а неважные только если для них хватает места.
16 янв 18, 14:11    [21110690]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
Alibek B.
Member

Откуда:
Сообщений: 3015
krvsa
Пример ниже не выглядит так же, как по твоей ссылке.

Я так понял, что подключен только jQuery?
Чтобы выглядело нормально, нужно подключить еще и Bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
16 янв 18, 14:14    [21110701]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B.
overflow — это когда содержимое не умещается в контейнер и нужно определить, что делать с непомещающейся частью.
А у меня немного другая ситуация — в контейнере есть важные и неважные элементы, важные нужно отображать всегда, а неважные только если для них хватает места.

Ситуация у тебя как раз точь в точь.
Только нужно правильно указать размеры элемента. Ведь всегда есть
min-width
/* и */
max-width

Которые могут ограничить элемент по ширине, не мешая ему растягиваться.
16 янв 18, 15:04    [21110964]     Ответить | Цитировать Сообщить модератору
 Re: Автоматическое скрытие длинных текстовых подписей  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13155
Alibek B.
Чтобы выглядело нормально, нужно подключить еще и Bootstrap

Нууу, тут я пас. С "приложениями" точно не стану связываться.
16 янв 18, 15:05    [21110971]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить