ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматическое скрытие длинных текстовых подписей
10 сообщений из 10, страница 1 из 1
Автоматическое скрытие длинных текстовых подписей
    #39584743
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Есть такой фрагмент (элементы списка представляются в виде вкладок):
Код: html
1.
2.
3.
<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>
...


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


Ширину я подобрал экспериментально и добавил чуть сверху.
Но мне бы хотелось более умное поведение — чтобы при недостаточной ширине окна текстовые подписи автоматически скрывались так в определенном порядке, чтобы вкладки никогда не переносились.
Можно ли такое сделать без JS, средствами только CSS?
...
Рейтинг: 0 / 0
16.01.2018, 00:05
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39584804
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B. , пример тестовый с твоими текстами дай, дабы нам их не выдумывать.

Можно попробовать использовать Flexbox, как вариант...
...
Рейтинг: 0 / 0
16.01.2018, 09:08
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39584805
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B. , вот есть пример "обрезания"...
http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro
http://theory.phphtml.net/css/text-overflow.html
...
Рейтинг: 0 / 0
16.01.2018, 09:11
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39584916
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Нет, overflow это совсем другое, мне нужно не содержание обрезать, а скрыть часть информации при недостатке места.
Вот рабочий пример: https://jsfiddle.net/184nu5eL/1/
Если уменьшать ширину окна браузера, то в определенный момент все текстовые подписи на закладках будут скрыты, останутся только значки. Но сейчас это просто условие по ширине окна меньше 700 пикселов.
Мне бы хотелось сделать так, что когда закладки с текстом перестают умещаться в одну строку, их текстовые подписи скрывались, либо по очереди (это было бы вообще идеально), либо одновременно; исходя не из ширины окна, а из ширины родительского контейнера.
...
Рейтинг: 0 / 0
16.01.2018, 11:10
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585065
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.мне нужно не содержание обрезать, а скрыть часть информации
Пока разницы не вижу...
...
Рейтинг: 0 / 0
16.01.2018, 13:25
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585068
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.Вот рабочий пример: https://jsfiddle.net/184nu5eL/1/
Он не "локализуется". Пример ниже не выглядит так же, как по твоей ссылке.

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!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>

...
Рейтинг: 0 / 0
16.01.2018, 13:27
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585108
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
krvsaОн не "локализуется". Пример ниже не выглядит так же, как по твоей ссылке.
Наверное это FontAwesome так борется против использования своего CDN.
Тогда так: https://jsfiddle.net/184nu5eL/2/ (вместо значков буквы в квадратных скобках)

krvsaПока разницы не вижу
overflow — это когда содержимое не умещается в контейнер и нужно определить, что делать с непомещающейся частью.
А у меня немного другая ситуация — в контейнере есть важные и неважные элементы, важные нужно отображать всегда, а неважные только если для них хватает места.
...
Рейтинг: 0 / 0
16.01.2018, 14:11
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585111
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
krvsaПример ниже не выглядит так же, как по твоей ссылке.
Я так понял, что подключен только jQuery?
Чтобы выглядело нормально, нужно подключить еще и Bootstrap:
Код: html
1.
2.
3.
4.
5.
<!-- 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>
...
Рейтинг: 0 / 0
16.01.2018, 14:14
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585160
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.overflow — это когда содержимое не умещается в контейнер и нужно определить, что делать с непомещающейся частью.
А у меня немного другая ситуация — в контейнере есть важные и неважные элементы, важные нужно отображать всегда, а неважные только если для них хватает места.
Ситуация у тебя как раз точь в точь.
Только нужно правильно указать размеры элемента. Ведь всегда есть
Код: css
1.
2.
3.
min-width
/* и */
max-width


Которые могут ограничить элемент по ширине, не мешая ему растягиваться.
...
Рейтинг: 0 / 0
16.01.2018, 15:04
| Ответить | Цитировать | Написать  
Автоматическое скрытие длинных текстовых подписей
    #39585162
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.Чтобы выглядело нормально, нужно подключить еще и Bootstrap
Нууу, тут я пас. С "приложениями" точно не стану связываться.
...
Рейтинг: 0 / 0
16.01.2018, 15:05
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматическое скрытие длинных текстовых подписей
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39584743&tid=1444333]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 180ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 56ms
get tp. blocked users:
 1ms
others: 247ms
total:  530ms
созд. / загр.: 530ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]