Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width и сжать div до ширины текста при переносе строк / 25 сообщений из 31, страница 1 из 2
  1  все
26.09.2019, 09:42
    #39867171
marvel
marvel
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width и сжать div до ширины текста при переносе строк
max-width:220px; сжимает div до ширины текста только в том случае если нет переносов строк, в противном случае ширина дива будет всегда 220px. Не нашел решения в гугле, как можно решить эту проблему, может кто сталкивался?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2019, 10:41
    #39867207
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width и сжать div до ширины текста при переносе строк
marvel , осилишь сделать тестовый пример?
Пока не понятно какая у тебя проблема...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2019, 11:23
    #39867229
marvel
marvel
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width и сжать div до ширины текста при переносе строк
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, 15:53
    #39867392
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width и сжать div до ширины текста при переносе строк
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:54
    #39867393
marvel
marvel
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width и сжать div до ширины текста при переносе строк
krvsa,

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

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

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

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

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

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

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

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

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

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

max-content не поддерживается IE11, Edge. Не знаю, как там у ТС с браузерами у заказчика...
А Ваша идея насчет <span> хорошая, немного переделал, чтобы правая граница была близко к тексту: https://jsfiddle.net/8mgyujxo/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width и сжать div до ширины текста при переносе строк / 25 сообщений из 31, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 191ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443652]:
 0ms
get settings:
 11ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 67ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 60ms
get tp. blocked users:
 2ms
others: 14ms
total:  191ms
x
x
Закрыть


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