Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматическое скрытие длинных текстовых подписей / 10 сообщений из 10, страница 1 из 1
16.01.2018, 00:05
    #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, 09:08
    #39584804
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматическое скрытие длинных текстовых подписей
Alibek B. , пример тестовый с твоими текстами дай, дабы нам их не выдумывать.

Можно попробовать использовать Flexbox, как вариант...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2018, 09:11
    #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, 11:10
    #39584916
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматическое скрытие длинных текстовых подписей
Нет, overflow это совсем другое, мне нужно не содержание обрезать, а скрыть часть информации при недостатке места.
Вот рабочий пример: https://jsfiddle.net/184nu5eL/1/
Если уменьшать ширину окна браузера, то в определенный момент все текстовые подписи на закладках будут скрыты, останутся только значки. Но сейчас это просто условие по ширине окна меньше 700 пикселов.
Мне бы хотелось сделать так, что когда закладки с текстом перестают умещаться в одну строку, их текстовые подписи скрывались, либо по очереди (это было бы вообще идеально), либо одновременно; исходя не из ширины окна, а из ширины родительского контейнера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2018, 13:25
    #39585065
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматическое скрытие длинных текстовых подписей
Alibek B.мне нужно не содержание обрезать, а скрыть часть информации
Пока разницы не вижу...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2018, 13:27
    #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, 14:11
    #39585108
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматическое скрытие длинных текстовых подписей
krvsaОн не "локализуется". Пример ниже не выглядит так же, как по твоей ссылке.
Наверное это FontAwesome так борется против использования своего CDN.
Тогда так: https://jsfiddle.net/184nu5eL/2/ (вместо значков буквы в квадратных скобках)

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


Которые могут ограничить элемент по ширине, не мешая ему растягиваться.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2018, 15:05
    #39585162
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматическое скрытие длинных текстовых подписей
Alibek B.Чтобы выглядело нормально, нужно подключить еще и Bootstrap
Нууу, тут я пас. С "приложениями" точно не стану связываться.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматическое скрытие длинных текстовых подписей / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 763ms
Закрыть
start [/forum/search_topic.php?author=%D0%A1%D0%BA%D0%B5%D0%BF%D1%82%D0%B8%D0%BA&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 11ms
get forum list:
 14ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 156ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 487ms
total:  763ms
x
x
Закрыть


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