ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width и сжать div до ширины текста при переносе строк
31 сообщений из 31, показаны все 2 страниц
  все  
max-width и сжать div до ширины текста при переносе строк
    #39867171
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
max-width:220px; сжимает div до ширины текста только в том случае если нет переносов строк, в противном случае ширина дива будет всегда 220px. Не нашел решения в гугле, как можно решить эту проблему, может кто сталкивался?
...
Рейтинг: 0 / 0
26.09.2019, 09:42
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867207
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvel , осилишь сделать тестовый пример?
Пока не понятно какая у тебя проблема...
...
Рейтинг: 0 / 0
26.09.2019, 10:41
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867229
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
krvsa marvel , осилишь сделать тестовый пример?
Пока не понятно какая у тебя проблема...

Код: html
1.
2.
<div class="center-div">Это просто очень длинный текст который будет имеет перенос строк
</div>


Код: css
1.
2.
3.
4.
5.
.center-div
{
  max-width:220px;
  float: left;
}



Если в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста. Если уменьшить текст, например "Это просто очень", то ширина div 114px, тоесть div сжался.
Собственно вопрос как сжать имея перенос строк.
Спасибо.
...
Рейтинг: 0 / 0
26.09.2019, 11:23
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867392
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelЕсли в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста.
Так он его и так уменьшил...
Ровно до
Код: css
1.
max-width:220px;



Код: 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.
<!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'>
.center-div {
	max-width: 220px;
	float: left;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	alert($('#test').css('width'));
});
</script>
</head>
<body>
<div id='test' class="center-div">Это просто очень длинный текст который будет имеет перенос строк
</div>
</body>
</html>



Почему ты считаешь, что ДИВ должен быть еще уже?
...
Рейтинг: 0 / 0
26.09.2019, 15:53
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867393
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
krvsa,

Потому что есть пустые края справа
...
Рейтинг: 0 / 0
26.09.2019, 15:54
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867397
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvel , вот твой текст с "переносом строк"... Он ужимамется...

Код: 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.
<!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'>
.center-div {
	max-width: 220px;
	float: left;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	alert($('#test').css('width'));
});
</script>
</head>
<body>
<div id='test' class="center-div">
	Это просто очень

	длинный текст

	который будет

	имеет перенос

	строк
</div>
</body>
</html>
...
Рейтинг: 0 / 0
26.09.2019, 15:56
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867400
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelПотому что есть пустые края справа
Аааа, вон ты про что... Но это уже завтра, я домой...
...
Рейтинг: 0 / 0
26.09.2019, 15:58
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867677
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelесть пустые края справа
Покрутил я этот пример в разных вариантах... Но не получилось убрать "пустое место" слева от текста.
...
Рейтинг: 0 / 0
27.09.2019, 07:48
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867697
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
marvel,

на https://jsfiddle.net/ выложи , проблема не понятна
...
Рейтинг: 0 / 0
27.09.2019, 09:17
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867746
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
krvsamarvelесть пустые края справа
Покрутил я этот пример в разных вариантах... Но не получилось убрать "пустое место" слева от текста.

ты наверное имел ввиду пустое место справа..
...
Рейтинг: 0 / 0
27.09.2019, 11:28
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867748
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
вадяmarvel,

на https://jsfiddle.net/ выложи , проблема не понятна

выложил https://jsfiddle.net/m12pqfoz/

Суть проблемы в том что у div справа есть пустое место которое я хочу убрать (сжать)
...
Рейтинг: 0 / 0
27.09.2019, 11:29
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867766
Фотография peter64
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
peter64
Участник
Не оно ? max-width:auto;
...
Рейтинг: 0 / 0
27.09.2019, 11:48
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867798
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelты наверное имел ввиду пустое место справа..
Все верно.
Справа, а не слева...
...
Рейтинг: 0 / 0
27.09.2019, 12:38
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867800
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
marvel,

так устроит?
https://jsfiddle.net/fg530uhL/
...
Рейтинг: 0 / 0
27.09.2019, 12:40
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867803
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
marvel,
даже так https://jsfiddle.net/fg530uhL/
...
Рейтинг: 0 / 0
27.09.2019, 12:43
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867815
marvel
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
marvel
Участник
вадя,

к сожалению нет не устроит растягивание текста, я это уже предлагал заказчику :)
...
Рейтинг: 0 / 0
27.09.2019, 12:59
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867850
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
marvel,

можно через флекс, только надо задать минимальную ширину, в моём примере это 190px: https://jsfiddle.net/1w6edbxc/
...
Рейтинг: 0 / 0
27.09.2019, 13:40
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867851
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelЕсли в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста.
Твоя "идея" не верна...
Блок должен стать больше ограничения 220, но ему это запрещено. Тогда он становится максимально широким - 220. Но текст в такие рамки не помещается, происходит перенос слов и увеличение высоты...
...
Рейтинг: 0 / 0
27.09.2019, 13:42
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867858
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
marvelне устроит растягивание текста, я это уже предлагал заказчику :)
Могу предложить такой костыль...

Код: 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.
<!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'>
.center-div {
	max-width: 220px;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	var o=$('#test');
	var w=o.css('width');
	o.parent().css('width',w);
});
</script>
</head>
<body>
<div class="center-div"><span id='test'>Это просто очень длинный текст который будет имеет перенос строк</span></div>
</body>
</html>
...
Рейтинг: 0 / 0
27.09.2019, 13:48
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867860
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SQLPowerUserможно через флекс
Если ты начнешь уменьшать текст - див так и останется 220px... Он не подстроится под уменьшающийся размер текста.
...
Рейтинг: 0 / 0
27.09.2019, 13:50
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867869
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
krvsa,

нет :)
Сейчас уменьшил текст, flex: 0 1 190px; отработал правильно, так и осталось 190
...
Рейтинг: 0 / 0
27.09.2019, 14:09
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867878
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SQLPowerUserнет :)
Сейчас уменьшил текст
...
так и осталось 190
Это и есть не то, что нужно ТСу...
Должно быть все меньше и меньше.
...
Рейтинг: 0 / 0
27.09.2019, 14:20
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867887
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
https://jsfiddle.net/r3hz2bw8/
...
Рейтинг: 0 / 0
27.09.2019, 14:31
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867912
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Уже не успеваю следить за новыми свойствами и новыми значениями в ЦСС...
...
Рейтинг: 0 / 0
27.09.2019, 15:04
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867918
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
krvsa,

max-content не поддерживается IE11, Edge. Не знаю, как там у ТС с браузерами у заказчика...
А Ваша идея насчет <span> хорошая, немного переделал, чтобы правая граница была близко к тексту: https://jsfiddle.net/8mgyujxo/
...
Рейтинг: 0 / 0
27.09.2019, 15:11
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867922
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
вадя , не все так просто...

Код: 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.
<!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'>
.center-div {
	width: max-content;
	max-width: 220px;
	border: 1px solid #ccc;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="center-div">
	Это просто очень длинный текст который будет имеет перенос строк
</div>
<div class="center-div">
	Это просто очень к fdsfas fasdf asd asdfasd fa af fs fdsdf sdf sfdg sdfhsj fhw
</div>
<div class="center-div">
	Это просто
</div>
</body>
</html>
...
Рейтинг: 0 / 0
27.09.2019, 15:16
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867925
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SQLPowerUser max-content не поддерживается IE11, Edge.
Так это идея не моя...
И, как видно из моего примера (см.выше), работает она как-то с "оговорками"...
...
Рейтинг: 0 / 0
27.09.2019, 15:18
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39867927
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
SQLPowerUser,
Edge поддерживает
...
Рейтинг: 0 / 0
27.09.2019, 15:20
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39868028
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
вадя,

???
https://caniuse.com/#search=max-content
...
Рейтинг: 0 / 0
27.09.2019, 17:00
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39868033
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
SQLPowerUserвадя,

???
https://caniuse.com/#search=max-content
...
Рейтинг: 0 / 0
27.09.2019, 17:12
| Ответить | Цитировать | Написать  
max-width и сжать div до ширины текста при переносе строк
    #39868039
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
SQLPowerUser,

счас уже 79
...
Рейтинг: 0 / 0
27.09.2019, 17:21
| Ответить | Цитировать | Написать  
31 сообщений из 31, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width и сжать div до ширины текста при переносе строк
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1443652]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 56ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 245ms
total:  398ms
созд. / загр.: 398ms
x
x
Закрыть


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