Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
Топик располагается на нескольких страницах: 1 2      [все]
 max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
max-width:220px; сжимает div до ширины текста только в том случае если нет переносов строк, в противном случае ширина дива будет всегда 220px. Не нашел решения в гугле, как можно решить эту проблему, может кто сталкивался?
26 сен 19, 09:42    [21979465]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel, осилишь сделать тестовый пример?
Пока не понятно какая у тебя проблема...
26 сен 19, 10:41    [21979530]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
krvsa
marvel, осилишь сделать тестовый пример?
Пока не понятно какая у тебя проблема...


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

.center-div
{
  max-width:220px;
  float: left;
}


Если в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста. Если уменьшить текст, например "Это просто очень", то ширина div 114px, тоесть div сжался.
Собственно вопрос как сжать имея перенос строк.
Спасибо.
26 сен 19, 11:23    [21979573]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
Если в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста.

Так он его и так уменьшил...
Ровно до
max-width:220px;


<!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>


Почему ты считаешь, что ДИВ должен быть еще уже?
26 сен 19, 15:53    [21980020]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
krvsa,

Потому что есть пустые края справа
26 сен 19, 15:54    [21980021]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel, вот твой текст с "переносом строк"... Он ужимамется...

<!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>
26 сен 19, 15:56    [21980027]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
Потому что есть пустые края справа

Аааа, вон ты про что... Но это уже завтра, я домой...
26 сен 19, 15:58    [21980033]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
есть пустые края справа

Покрутил я этот пример в разных вариантах... Но не получилось убрать "пустое место" слева от текста.
27 сен 19, 07:48    [21980465]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
marvel,

на https://jsfiddle.net/ выложи , проблема не понятна
27 сен 19, 09:17    [21980504]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
krvsa
marvel
есть пустые края справа

Покрутил я этот пример в разных вариантах... Но не получилось убрать "пустое место" слева от текста.


ты наверное имел ввиду пустое место справа..
27 сен 19, 11:28    [21980659]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
вадя
marvel,

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


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

Суть проблемы в том что у div справа есть пустое место которое я хочу убрать (сжать)
27 сен 19, 11:29    [21980664]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
peter64
Member

Откуда:
Сообщений: 122
Не оно ? max-width:auto;
27 сен 19, 11:48    [21980706]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
ты наверное имел ввиду пустое место справа..

Все верно.
Справа, а не слева...
27 сен 19, 12:38    [21980770]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
marvel,

так устроит?
https://jsfiddle.net/fg530uhL/
27 сен 19, 12:40    [21980772]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
marvel,
даже так https://jsfiddle.net/fg530uhL/
27 сен 19, 12:43    [21980777]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
marvel
Member

Откуда:
Сообщений: 1066
вадя,

к сожалению нет не устроит растягивание текста, я это уже предлагал заказчику :)
27 сен 19, 12:59    [21980795]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 306
marvel,

можно через флекс, только надо задать минимальную ширину, в моём примере это 190px: https://jsfiddle.net/1w6edbxc/
27 сен 19, 13:40    [21980854]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
Если в инспекторе браузера посмотреть элемент div, то он имеет ширину 220px, хотя по идее он должен был сжать div до ширины текста.

Твоя "идея" не верна...
Блок должен стать больше ограничения 220, но ему это запрещено. Тогда он становится максимально широким - 220. Но текст в такие рамки не помещается, происходит перенос слов и увеличение высоты...
27 сен 19, 13:42    [21980859]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
marvel
не устроит растягивание текста, я это уже предлагал заказчику :)

Могу предложить такой костыль...

<!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>
27 сен 19, 13:48    [21980868]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
SQLPowerUser
можно через флекс

Если ты начнешь уменьшать текст - див так и останется 220px... Он не подстроится под уменьшающийся размер текста.
27 сен 19, 13:50    [21980874]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 306
krvsa,

нет :)
Сейчас уменьшил текст, flex: 0 1 190px; отработал правильно, так и осталось 190

К сообщению приложен файл. Размер - 1Kb
27 сен 19, 14:09    [21980899]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
SQLPowerUser
нет :)
Сейчас уменьшил текст
...
так и осталось 190

Это и есть не то, что нужно ТСу...
Должно быть все меньше и меньше.
27 сен 19, 14:20    [21980919]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
https://jsfiddle.net/r3hz2bw8/
27 сен 19, 14:31    [21980932]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
Уже не успеваю следить за новыми свойствами и новыми значениями в ЦСС...
27 сен 19, 15:04    [21980973]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 306
krvsa,

max-content не поддерживается IE11, Edge. Не знаю, как там у ТС с браузерами у заказчика...
А Ваша идея насчет <span> хорошая, немного переделал, чтобы правая граница была близко к тексту: https://jsfiddle.net/8mgyujxo/
27 сен 19, 15:11    [21980983]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
вадя, не все так просто...

<!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>
27 сен 19, 15:16    [21980989]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13308
SQLPowerUser
max-content не поддерживается IE11, Edge.

Так это идея не моя...
И, как видно из моего примера (см.выше), работает она как-то с "оговорками"...
27 сен 19, 15:18    [21980992]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
SQLPowerUser,
Edge поддерживает
27 сен 19, 15:20    [21980995]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 306
вадя,

???
https://caniuse.com/#search=max-content
27 сен 19, 17:00    [21981147]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
SQLPowerUser
вадя,

???
https://caniuse.com/#search=max-content


К сообщению приложен файл. Размер - 118Kb
27 сен 19, 17:12    [21981153]     Ответить | Цитировать Сообщить модератору
 Re: max-width и сжать div до ширины текста при переносе строк  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16781
SQLPowerUser,

счас уже 79
27 сен 19, 17:21    [21981161]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: 1 2      [все]
Все форумы / HTML, JavaScript, VBScript, CSS Ответить