Форум

ruslan_mart · #1 (**permalink**) 06.10.2015, 11:52

Всем доброго времени суток.
Столкнулся с такой проблемой: http://jsfiddle.net/os77p8w6/

Нужно, чтобы правая ячейка с кнопками была по размеру контента. Принудительно задать ширину не могу, так как кнопок может быть разное количество. Можно конечно сделать width: 0, но с table-layout: fixed такое не работает, а его я убрать не могу, так как в первой ячейке мне нужен overflow: hidden для скрытия большого текста с помощью text-overflow.

Рукож*пить с кучей вложенных элементов не хочется.

Есть идеи?

Decode · #2 (**permalink**) 06.10.2015, 13:09

http://jsfiddle.net/os77p8w6/1/

ksa · #3 (**permalink**) 06.10.2015, 13:18

Сообщение от Ruslan_xDD

Есть идеи?

Идеи хороши в самом начале...

А тут ты уже табличку намастырил их ДИВов... Что у тебя вообще есть? Одну строчку нужно сделать?
Дабы понять, что вообще можно делать.

ruslan_mart · #4 (**permalink**) 06.10.2015, 14:19

Decode, спасибо, вариант хороший, думал о нём, но поддержка flex не очень радует.

Сообщение от ksa

А тут ты уже табличку намастырил их ДИВов... Что у тебя вообще есть? Одну строчку нужно сделать?
Дабы понять, что вообще можно делать.

Делаю конструктор окон. Хочу сделать как можно грамотнее, т.е., без лишних тэгов и т.д.
То что кинул выше - это шапка для окна: слева название, а справа - кнопки управления (закрыть, свернуть, помощь и т.д.). Всё это делается очень легко, если бы не text-overflow, так как нужно, чтобы длинный текст переходил в точки. Поэтому и пришла сразу идея сделать двумя ячейками, но вот никак не могу из-за table-layout: fixed выставить width: 0 для правой ячейки (или width: 100% для левой) - начинает уезжать за пределы родителя.

ksa · #5 (**permalink**) 06.10.2015, 14:54

Сообщение от Ruslan_xDD

чтобы длинный текст переходил в точки

Вона че...

ksa · #6 (**permalink**) 06.10.2015, 15:09

Ruslan_xDD, как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://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'>
* {
	margin: 0;
	padding: 0;
}
.window {
	width: 200px;
	height: 100px;
	margin: 10px;
	border: 1px solid #AAA;
}
.title {
	overflow: hidden;
    background: #AAA;
}
.tit-command {
	float: right;
    background: #777;
}
.tit-command > div {
    background: green;
    display: inline-block;
    height: 25px;
    margin: 0 5px;
    vertical-align: top;
    width: 25px;
}
.tit-text {
	overflow: hidden;
}
.tit-text > p {
	white-space: nowrap; /* Отменяем перенос текста */
	overflow: hidden; /* Обрезаем содержимое */
	text-overflow: ellipsis; /* Многоточие */
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='window'>
	<div class='title'>
		<div class='tit-command'>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class='tit-text'>
			<p>
				Бессознательное вызывает контраст, это обозначено 
				Ли Россом как фундаментальная ошибка атрибуции, которая 
				прослеживается во многих экспериментах.
			</p>
		</div>
	</div>
</div>
</body>
</html>

У меня в Опере, ФФ, Хроме и ИЕ9 работает...

ksa · #7 (**permalink**) 06.10.2015, 15:14

Навеяно этим
Растянуть блок на оставшееся пространство
и
http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro

ruslan_mart · #8 (**permalink**) 06.10.2015, 15:55

ksa, обтеканием значит... так и знал, что туда нужно копать.

Только overflow:hidden в tit-text и title я полагаю не нужен, вроде и без него работает. Или всё-таки для чего-то значит?

Но как бы там не было, спасибо тебе!

ksa · #9 (**permalink**) 06.10.2015, 16:30

Сообщение от Ruslan_xDD

Только overflow:hidden в tit-text и title я полагаю не нужен

В title он дает "растяжение" плавающим блоком по высоте. Я такое ставлю кагбэ по дефолту...

В tit-text он как раз задает "блочный контекст". Это важно если у тебя фоны элементов будут разные... Или у элементов есть еще какое-то оформление...

ksa · #10 (**permalink**) 06.10.2015, 16:36

Вот смотри, для наглядности.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://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'>
* {
	margin: 0;
	padding: 0;
}
.window {
	width: 200px;
	height: 100px;
	margin: 10px;
	border: 1px solid #AAA;
}
.title {
	overflow: hidden;
    background: #AAA;
}
.tit-command {
	float: right;
	border: 1px dashed;
}
.tit-command > div {
    background: green;
    display: inline-block;
    height: 40px;
    margin: 0 5px;
    vertical-align: top;
    width: 25px;
}
.tit-text {
	overflow: hidden;
	border: 1px dashed;
}
.tit-text > p {
	white-space: nowrap; /* Отменяем перенос текста */
	overflow: hidden; /* Обрезаем содержимое */
	text-overflow: ellipsis; /* Многоточие */
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='window'>
	<div class='title'>
		<div class='tit-command'>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class='tit-text'>
			<p>
				Бессознательное вызывает контраст, это обозначено 
				Ли Россом как фундаментальная ошибка атрибуции, которая 
				прослеживается во многих экспериментах.
			</p>
		</div>
	</div>
</div>
</body>
</html>

Если начнешь убирать

Сообщение от Ruslan_xDD

overflow:hidden

в tit-text и title

Картинка будет уже не такая.

Форум

Справочник

Discord чат

Курсы javascript