ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обрезать текст в элементе с переменной длинной?
8 сообщений из 8, страница 1 из 1
Как обрезать текст в элементе с переменной длинной?
    #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, 17:49:53
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019216
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
А если не задавать ширину? - Она же сама установится. А максимум установить как max-width.

P.S. Подходит даже для ИЕ7, если не ставить inherit.
...
Рейтинг: 0 / 0
30.10.2012, 18:25:26
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019219
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
http://cssdeck.com/labs/na24g9nf/0
...
Рейтинг: 0 / 0
30.10.2012, 18:27:44
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019271
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
private
Участник
Ха, классно, Яростный Меч спасибо, я уж думал прийдется с таблицами возиться :)
...
Рейтинг: 0 / 0
30.10.2012, 19:05:52
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019377
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Хм ... а как посмотреть-то?
...
Рейтинг: 0 / 0
30.10.2012, 21:28:52
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019478
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
private
Участник
По ссылке Яростного Меча нужно перейти.
...
Рейтинг: 0 / 0
31.10.2012, 00:48:06
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #38019484
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
И-и-и? - Увидеть 3 пустых окошка?
...
Рейтинг: 0 / 0
31.10.2012, 01:05:20
| Ответить | Цитировать | Написать  
Как обрезать текст в элементе с переменной длинной?
    #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
31.10.2012, 02:45:46
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обрезать текст в элементе с переменной длинной?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38019506&tid=1449172]:
 0ms
get settings:
 17ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 98ms
get topic data:
 22ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 255ms
total:  462ms
созд. / загр.: 462ms
x
x
Закрыть


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