Ширина блока по ширине контента

@Alehandros · Регистрация: 25.09.2019

Студворк — интернет-сервис помощи студентам

Подскажите, можно ли только корректировкой CSS решить задачу? Для демонстрации есть упрощенный код. Кнопки меню. Когда название раздела умещается в 180 точек - все ОК. Когда название раздела разбивается на две строки, кнопка остается максимальной ширины, при ширине контента много меньшей. Можно ли без JS получить ширину кнопки соответствующую ширине контента?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.menu {
    width:100%;
    border:1px solid red;
}
 
.but {
    display:inline-block;
    max-width:180px;
    padding:5px 15px;
    vertical-align:middle;
    border:1px solid red;
}
</style>
 
<div class="menu">
    <div class="but">Короткий контент</div>
    <div class="but">Не очень длинный контент</div>
    <div class="but">Деятельность и бездеятельность</div>
    <div class="but">Информация - дезинформация</div>
    <div class="but">Просто контент</div>
    <div class="but">Контент</div>
</div>

Получается картинка во вложении. По картинке задача - сделать 2,3,4 кнопки шириной их надписей.

Пробовал и оборачивать контент .but разными блоками, и разные вариации width/min-width/max-width, и разные варианции display самого but или обертки внутри but, и -webkit-min-content - или бесполезно или не то.

Может кто знает?

@shvyrevvg · 25.09.2019, 16:09

Сообщение от Alehandros

кнопка остается максимальной ширины, при ширине контента много меньшей.

Как раз-таки ширина контента будет больше 180px, поэтому и переносятся слова

@Alehandros · 25.09.2019, 16:18 **[ТС]**

shvyrevvg, это то ясно, для того и переносятся слова, чтобы не растягивать кнопки более некоторой ширины. Вопрос в том, как сделать ширину двустрочной кнопки не более ширины надписи. Средствами JS .onload могу, но они скорее всего неестетственные для ситуации.

@shvyrevvg · 25.09.2019, 16:27

Alehandros, есть медиа запросы, есть display: flex для родителя.

@Alehandros · 25.09.2019, 16:46 **[ТС]**

Пардон, моих знаний не хватает, чтобы найти решение указанными способами. Подскажете?

@shvyrevvg · 25.09.2019, 16:57

Alehandros, пример, при ширине "экрана" до 600px будет максимальная ширина 100px

CSS
1
2
3
4
5
@media (max-width: 600px) {
  .but {
    max-width:100px;
  }
}

@Alehandros · 25.09.2019, 17:04 **[ТС]**

Спасибо, но это не то решение. Адаптивность верстки для разных экранов решена иначе - отдельное мобильное меню, вертикальным списком. Стоит задача для большого меню, для названий не помещающихся в одну строку сделать компактные кнопки с надписью в две строки.

@Alehandros · 25.09.2019, 17:06 **[ТС]**

shvyrevvg, т.е. из вида первой картинки получить вид второй (вложение)

@Cheeeasy2501 · 25.09.2019, 17:36

Alehandros, Вам нужно, чтобы вторая кнопка была как первая по высоте, только в две строки?

@shvyrevvg · 25.09.2019, 17:37

Сообщение от Alehandros

т.е. из вида первой картинки получить вид второй

Alehandros, если на столько все плохо, добавляйте картинки для разных размеров(мобильный, планшет, пк), я то откуда знаю как Вам нужно

@gogolik · 25.09.2019, 19:05

CSS
1
2
3
4
5
6
7
8
9
10
11
.menu {
    width:100%;
    display: flex;
    justify-content: space-between;
}
 
.but {
    padding:5px 15px;
    vertical-align:middle;
    border:1px solid red;
}

@Alehandros · 27.09.2019, 15:34 **[ТС]**

Не о том все. Простите, похоже сложно объяснил что требуется. Упрощаю вопрос:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.block {
    display:inline-block;
    max-width:170px;
    border:1px solid red;
    padding:5px;
}
 
.content {
    display:inline;
    border:1px solid green;
}
</style>
 
<div class="block">
    <div class="content">Бесполезная информация</div>
</div>

Отдает block максимальной ширины (170px) при заполнении контентом в две строки шириной чуть более 85px. Есть ли способ заставить block принимать ширину по ширине контента в этом случае?

Добавлено через 12 минут
В общем случае в контенте может быть все что угодно 2 - 5 слов, союзы, предлоги, дефисы и т.п. Поэтому
width:-webkit-min-content; для content не подходит в общем случае
JS onload не хотелось бы
есть решение с расстановкой принудительных <br>, но это тоже не просто в общих случаях

@Cheeeasy2501 · 27.09.2019, 16:38

Alehandros,
Как альтернативу можно использовать перенос слов

CSS
1
word-break: break-all;

А вам зачем такие жесткие условия если не секрет?

@Alehandros · 27.09.2019, 17:09 **[ТС]**

Тоже не решение, но спасибо.

Да не секрет. Как всегда дело в пожеланиях заказчика. Речь о портале, включающем в себя сайты региональных организаций разного уровня. Общий шаблон и разнообразные главные меню, в которых может быть самый разнообразный набор разделов - от "Главная", "О нас" и "Новости" до "Самый важный раздел не может быть коротким". Убеждения о пользе коротких названий не имеют действия. И такие кнопки тоже "должны быть в главном меню". Вот и ищу простые способы впихнуть невпихнуемое в кнопки главного меню в компактном виде. Там выше картинки про это.

@Cheeeasy2501 · 28.09.2019, 11:47

Alehandros, Тут наверное JS поможет только если, или скрывать часть текста и при наведение изменять размер кнопки, хз

@Alehandros · 29.09.2019, 00:27 **[ТС]**

Cheeeasy2501, да, спасибо! Я тоже так и не нашел вменяемого решения, кроме JS. Так и сделал.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	25.09.2019, 16:18 [ТС]
	shvyrevvg, это то ясно, для того и переносятся слова, чтобы не растягивать кнопки более некоторой ширины. Вопрос в том, как сделать ширину двустрочной кнопки не более ширины надписи. Средствами JS .onload могу, но они скорее всего неестетственные для ситуации. 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	25.09.2019, 16:27
	Alehandros, есть медиа запросы, есть display: flex для родителя. 0

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	25.09.2019, 16:46 [ТС]
	Пардон, моих знаний не хватает, чтобы найти решение указанными способами. Подскажете? 0

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	25.09.2019, 17:04 [ТС]
	Спасибо, но это не то решение. Адаптивность верстки для разных экранов решена иначе - отдельное мобильное меню, вертикальным списком. Стоит задача для большого меню, для названий не помещающихся в одну строку сделать компактные кнопки с надписью в две строки. 0

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	25.09.2019, 17:06 [ТС]
	shvyrevvg, т.е. из вида первой картинки получить вид второй (вложение) Миниатюры 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	25.09.2019, 17:36
	Alehandros, Вам нужно, чтобы вторая кнопка была как первая по высоте, только в две строки? 1

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	27.09.2019, 17:09 [ТС]
	Тоже не решение, но спасибо. Да не секрет. Как всегда дело в пожеланиях заказчика. Речь о портале, включающем в себя сайты региональных организаций разного уровня. Общий шаблон и разнообразные главные меню, в которых может быть самый разнообразный набор разделов - от "Главная", "О нас" и "Новости" до "Самый важный раздел не может быть коротким". Убеждения о пользе коротких названий не имеют действия. И такие кнопки тоже "должны быть в главном меню". Вот и ищу простые способы впихнуть невпихнуемое в кнопки главного меню в компактном виде. Там выше картинки про это. 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	28.09.2019, 11:47
	Alehandros, Тут наверное JS поможет только если, или скрывать часть текста и при наведение изменять размер кнопки, хз 1

@Alehandros 0 / 0 / 0 Регистрация: 25.09.2019 Сообщений: 8
	29.09.2019, 00:27 [ТС]
	Cheeeasy2501, да, спасибо! Я тоже так и не нашел вменяемого решения, кроме JS. Так и сделал. 0