Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обрезать текст в элементе с переменной длинной? / 8 сообщений из 8, страница 1 из 1
30.10.2012, 17:49:53
    #38019155
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
Если длинна известна заранее то текст можо обрезать вот так:

.my-class {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Но как его обрезать если длинна динамическая?

Пример - хедер на странице, заголовок слева, панель кнопок справа (оба на одной линии)



Заголовок должен занимать все свободное место, но не выпирать и не перебрасывать панель кнопок на следущую линию.
На картинке ниже сделано неправильно - видно что место свободное есть и можно не обрезать.



Как это можно сделать (без таблиц)?

Живой код http://cssdeck.com/labs/fbe2t2qo/0
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 18:25:26
    #38019216
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
А если не задавать ширину? - Она же сама установится. А максимум установить как max-width.

P.S. Подходит даже для ИЕ7, если не ставить inherit.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 18:27:44
    #38019219
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
http://cssdeck.com/labs/na24g9nf/0
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 19:05:52
    #38019271
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
Ха, классно, Яростный Меч спасибо, я уж думал прийдется с таблицами возиться :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2012, 21:28:52
    #38019377
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
Хм ... а как посмотреть-то?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 00:48:06
    #38019478
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
По ссылке Яростного Меча нужно перейти.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 01:05:20
    #38019484
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
И-и-и? - Увидеть 3 пустых окошка?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2012, 02:45:46
    #38019506
private
private
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обрезать текст в элементе с переменной длинной?
Stranno, ya vot jeto viju

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<div class='header'>
	<div class='header-toolbar'>
		<button>Create</button>
	</div>
	<div class='header-title'>
		Very very very very very long very very long very very long very very long very very long very very long very very long very very long very very long very very long very very long title
		</div>
	
	<div class='clearfix'></div>
</div>



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
.header, .header-title, .header-toolbar {
	border: 1px solid black;
	margin: 3px;
	padding: 3px;
}

.header-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-toolbar {
	float: right;
}

.clearfix {
	clear: both;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обрезать текст в элементе с переменной длинной? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 282ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449172]:
 0ms
get settings:
 6ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 19ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 32ms
get tp. blocked users:
 2ms
others: 197ms
total:  282ms
x
x
Закрыть


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