Css style width fit

width

Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box , то она будет равняться ширине области рамки.

Интерактивный пример

Синтаксис

/* значения */ width: 300px; width: 25em; /* значения */ width: 75%; /* Значения-ключевые слова */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Глобальные значения */ width: inherit; width: initial; width: unset; 

Свойство width указывается как:

Значения

Ширина — фиксированная величина.

Ширина в процентах — размер относительно ширины родительского блока.

border-box Экспериментальная возможность

content-box Экспериментальная возможность

Браузер рассчитает и выберет ширину для указанного элемента.

fill Экспериментальная возможность

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

max-content Экспериментальная возможность

Внутренняя максимальная предпочтительная ширина.

min-content Экспериментальная возможность

Внутренняя минимальная ширина.

available Экспериментальная возможность

Ширина содержащего блока минус горизонтальные margin , border и padding .

fit-content Экспериментальная возможность

• внутренняя минимальная ширина
• меньшая из внутренней предпочтительной ширины и доступной ширины

Формальный синтаксис

width =
auto | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )

=
| (en-US)

Примеры

Ширина по умолчанию

p class="goldie">Сообщество Mozilla производит множество отличного ПО.p> 

Пиксели и em

.px_length  width: 200px; background-color: red; color: white; border: 1px solid black; > .em_length  width: 20em; background-color: white; color: red; border: 1px solid black; > 

div class="px_length">Ширина в пикселяхdiv> div class="em_length">Ширина в emdiv> 

Проценты

.percent  width: 20%; background-color: silver; border: 1px solid red; > 

div class="percent">Ширина в процентахdiv> 

max-content

p.maxgreen  background: lightgreen; width: intrinsic; /* Safari/WebKit используют нестандартное имя */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ > 

p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.p> 

min-content

p.minblue  background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ > 

p class="minblue">Сообщество Mozilla производит множество отличного ПО.p> 

Проблемы доступности

Убедитесь, что элементы с width не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

Спецификации

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, auto или абсолютная длина
Animation type	длина, проценты или calc();

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to set div width to fit content using CSS?

CSS (Cascading Style Sheets) is a powerful tool that is used to style web pages and create dynamic layouts, including the width property. Using CSS, the width property of a ‘div’ can be easily customized to create unique designs that enhance the user experience.

What is the div Element?

A is a block-level element in HTML that is used for defining a section of the document. Large sections of HTML elements can be grouped together using the div tag and formatted with CSS.

By default, a div element expands to fill the width of its parent container. This means that if the parent container is wider than the content inside the div, the div will also be wider than its content.

Syntax

Understanding the Basics of CSS box-sizing Property

The box-sizing property controls how the width and height of an element are calculated. To calculate the width and height of an element based on a combination of its content, padding, and border, we can set the box-sizing property to border-box.

Set the Width of a div Element Using CSS

The most common way to set the width of a div element is to use the width property in CSS. For example, we can use the following CSS code to set the width of a div element to 300 pixels −

Here, we have created a div element with the class name my-div and set the width to 300px.

Now, we will discuss the following approaches of how to set div width to fit content using CSS −

• Using max-content value to set div width dynamically
• Setting width using fit-content value for a flexible layout
• Using auto value to automatically adjust div width based on content
• Applying CSS overflow property to handle content overflow

Using max-content Value to set div Width Dynamically

Using the max-content value, the width of a div element can be set dynamically based on its content. The max-width CSS property sets the maximum width of an element while ignoring any specified width properties. To use the max-content value, we can use the following CSS rule −

This code will set the width of the div element to the maximum width of its content.

Example 1

Setting the width of a div to fit the content using the max-content value.

    h2 < text-align: center; >.max 
Max-Content Example
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit euismod, vehicula felis et, faucibus enim. Sed sit amet arcu nunc.
 
   

Setting Width using fit-content Value for a Flexible Layout

Using the fit-content value, the width of a div element can be set to fit its content. The fit-content CSS property sets the width of an element to the minimum width of its content and allows the element to expand based on its parent container’s width. To use the fit-content value, we can use the following CSS rule.

This code will set the width of the div element to the minimum width of its content. Changing the content inside the div element will also adjust the width of the element accordingly.

Example 2

Setting the width of a div to fit the content using the fit-content value.

    h2 < text-align: center; >.fit 
Fit-Content Example
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit euismod, vehicula felis et, faucibus enim. Sed sit amet arcu nunc.
 
   

Using Auto Value to Automatically Adjust div Width Based on Content

Using the auto value, the width of the div element can be set to fit its content. The auto value sets the width of an element to the width of its content, and allows the element to expand based on its parent container’s width. To use the auto value, we can use the following CSS rule.

This code will set the width of the div element to the width of its content. Changing the content inside the div element will also adjust the width of the element accordingly.

Example 3

Setting the width of a div to fit the content using the ‘auto’ value.

    h2 < text-align: center; >.auto 
Using auto value to automatically adjust div width based on content
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit euismod, vehicula felis et, faucibus enim. Sed sit amet arcu nunc.
 
   

Applying CSS Overflow Property to Handle Content Overflow

The overflow property controls the content inside an element overflows its boundaries. There are several values that can be used with the overflow property, including visible, hidden, scroll, and auto. To prevent overflow of content in a div element, we can set the overflow property to scroll. This will scroll any content that overflows the boundaries of the div element. for doing this, we can use the following CSS rule −

Example 4

Setting the width of a div to fit the content and handle overflow using the overflow property.

    h2 < text-align: center; >.scroll 
Applying CSS overflow property to handle content overflow
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit euismod, vehicula felis et, faucibus enim. Sed sit amet arcu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit euismod, vehicula felis et, faucibus enim. Sed sit amet arcu nunc.
 
   

Conclusion

In this article we have discussed the several approaches to set div width to fit content using CSS such as max-content value, fit-content value, and auto value. So setting the width of a div element to fit its content is a simple and effective way to ensure that the website looks great.

Источник

fit-content

The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content .

When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.

Note: The CSS Sizing specification also defines the fit-content() function. This page details the keyword.

Syntax

width: fit-content; block-size: fit-content; 

Examples

Using fit-content for box sizing

HTML

div class="container"> div class="item">Itemdiv> div class="item">Item with more text in it.div> div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. div> div> 

CSS

.container  border: 2px solid #ccc; padding: 10px; width: 20em; > .item  width: fit-content; background-color: #8ca0ff; padding: 5px; margin-bottom: 1em; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Fit-content и fit-content()

Прежде чем приступить к рассмотрению fit-content, мы должны кратко рассмотреть два особых значения для width: min-content и max-content. Они нужны вам для понимания fit-content.

Обычно (то есть со значением width:auto) блок занимает столько места по горизонтали, сколько может. Вы можете изменить горизонтальное пространство, указав для width конкретное значение, но вы также можете указать браузеру определить его значение по содержимому поля. Вот что делают min-content и max-content:

min-content означает: минимальная ширина контейнера с содержимым. На практике это означает, что браузеры видят, какой элемент контента самый широкий, и устанавливают для ширины поля это значение. Самый широкий фрагмент контента — это самое длинное слово в тексте, самое широкое изображение, видео или другой объект.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

max-content означает: максимальная ширина контейнера с содержимым . В случае текста это означает, что весь текст помещается в одну строку, а поле становится настолько широким, насколько это необходимо, чтобы вместить всю строку. В общем, это нежелательный эффект. Самым большим элементом контента также может быть изображением или видео; в этом случае браузеры используют эту ширину для определения ширины поля.

Если вы используете hyphens:auto или что-то подобное, браузер будет разбивать слова в правильных точках переноса, прежде чем определять минимальную ширину.

Quick Chromia

Все браузеры на базе Chromium на Android (протестированные в Chrome (v90), Samsung Internet (v87) и Edge (v77)) прерывают текст width:max-content в приведенном выше примере на тире и, таким образом, принимают ‘width: max-‘ в качестве максимального содержимого, при условии, что страница НЕ имеет мета-области просмотра. Ни один другой браузер не делает этого, в том числе Chrome на Mac.

Кроме того, Chromia на Android делает размер шрифта немного меньше, когда вы изменяете размер полей ниже максимально возможной ширины.

Этих ошибок НЕ возникает в UC (на основе Chromium 78). Кажется, UC принимает здесь свои собственные решения и невосприимчив к подобным ошибкам.

fit-content

По сути, понимание fit-content состоит в следующем:

Источник