Html css text container

container

The container shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.

Syntax

/* */ container: my-layout; /* / */ container: my-layout / size; /* Global Values */ container: inherit; container: initial; container: revert; container: revert-layer; container: unset; 

Values

A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.

The type of containment context. More details on the syntax are covered in the container-type property page.

Formal definition

• container-name : none
• container-type : normal

• container-name : no
• container-type : no

• container-name : none or an ordered list of identifiers
• container-type : as specified

• container-name : Not animatable
• container-type : a color

Formal syntax

Example

Given the following HTML example which is a card component with an image, a title, and some text:

div class="post"> div class="card"> h2>Card titleh2> p>Card contentp> div> div> 

The explicit way to create a container context is to declare a container-type with an optional container-name :

.post  container-type: inline-size; container-name: sidebar; > 

The container shorthand is intended to make this simpler to define in a single declaration:

.post  container: sidebar / inline-size; > 

You can then target that container by name using the @container at-rule:

@container sidebar (min-width: 400px)  /* */ > 

For more information on container queries, see the CSS Container Queries page.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS container queries
• @container at-rule
• CSS contain property
• CSS container-type property
• CSS container-name property
• CSS content-visibility property

Found a content problem with this page?

This page was last modified on Jul 17, 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.

Источник

W3.CSS Containers

This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.

The Container Class

The w3-container class adds a 16px left and right padding to any HTML element.

The w3-container class is the perfect class to use for all HTML container elements like:

Containers Provides Equality

The w3-container provides equality for all HTML container elements:

• Common margins
• Common paddings
• Common alignments
• Common fonts
• Common colors

To use a container, just add a w3-container class to any element:

Example

To add a color, just add a w3-color class:

Example

Headers and Footers

The w3-container class can be used to style headers:

Header

Example

Example

Header

There is no difference in the way W3.CSS treats and elements.

The w3-container class can be used to style footers:

Footer

Footer information goes here

Example

Example

Many web pages use elements instead of and elements.

Articles and Sections

The w3-container class can be used to style and elements:

Example

Paris

The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.

Tokyo

Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

Many web pages uses elements instead of and elements.

Web Page Example

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)

Footer

Example using HTML elements

Example using HTML semantic elements

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)

Container Padding

The w3-container class has a default 16px left and right padding, and no top or bottom padding:

Example

Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.

I am a Heading

Example

Источник

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.

Magic Number it with viewport units

If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number. In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier (@chriscoyier) on CodePen. This is kind of a less exotic version of fluid typography, which involves more of a sprinkling of viewport units and min/max sizes.

Dave Rupert’s FitText is up for the job. You still need a bit of a magic number to get the sizing just right for any particular job: See the Pen Fitted Text with FitText by Chris Coyier (@chriscoyier) on CodePen.

Swap the words in FitText around and you got yourself textFit! It’s another JavaScript library that adjusts font sizes to fit text into a container. Big caveat here though: textFit is designed for two-dimensions. So you need a width and height on the element for it to do it’s thing.

fitty is more like FitText in that it resizes type to maximize just horizontally, but actually seems to require no magic numbers.

TextFill is jQuery-based and requires a width, height, and a configured maximum font size to work. Here’s the basic demo we’ve been working from:

FlowType is kind of designed to work on a whole document of text, resizing it all fluidly at once, with minimum and maxium viewport sizes. But you can scope it however you want. You also apply a magic number to get things how you want them.

With width: 100% and a viewBox , SVG will be a fullsize box that resizes with an aspect ratio. Pretty neat trick! To set the type, you’ll need some magic numbers to get that viewBox just right and push the text into the right spot — but it’s doable with zero dependencies, just like the viewport units demo.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

PSA: vw is broken, because it measures what is every single time the wrong thing. It measures the viewport’s initial containing block, which means the entire viewport width including the vertical scrollbar that is almost certain to be there. This matters on operating systems that don’t use overlay scrollbars (Windows, many Linuxes, and some macOS users opt out of overlay scrollbars); on Windows, it’ll generally amount to 100vw actually being 17px wider than the body width. Therefore I say, if you are trying to measure things precisely with vw: (a) just don’t, you can’t succeed; and (b) if you insist on it anyway, make sure to allow at least 20px of slack (if that’s not acceptable, vw will not solve your problem)—and be ready to accept that even then your calc(100vw – 20px) may be wider than the body width in some circumstances.

Good to know. I find when I’m using viewport units I’m often not looking for super precision. I often use them to sprinking in a little viewport related bumps up and down with calc.

The best way I’ve gone about solving this is creating a CSS variable —window-width and set it to 100vw . Then in javascript i set this CSS variable to document.body.clientWidth which will get the width of window without the scrollbar.

Any suggestions on how to fit text vertically? I always end up with space above and below that I can’t seem to get rid of without adjusting line-height with magic numbers

Only the SVG worked properly in Firefox, none of the others. Neither textFit or TextFill work in Chrome or Firefox. fitty seemed to only react after screen resize event “ended”, but not live. (by design?) All of these feel like the incredibly awful Flash based text of 10 years ago, except for pure CSS using vw (why call this a “magic” number when it’s simple math/calc going on… nothing magic, and makes total sense) The Flash criticism is a bit funny to me because it really was just a clumsy SVG, but SVG is just an “image”, which I can get behind for custom uses. I agree that trying to make any adjustments with text “exact” is a recipe for disaster and reminds me of print designers making entire page layouts, with text, all as one image because they hated how they couldn’t control the design perfectly. Let go of control, and either style with breakpoints, vw + calc (or whatever) and let go of perfection. You get better designs and less stress. If you need pixel prefect layout, SVG to the rescue. CSS shouldn’t have to fill every niche need, it’s pulling more than it’s weight already.

Источник

Never make your text container a flexbox container

Now, you are given the common task to center the content of the box horizontally and vertically. Well, a trivial task:

let’s use flexbox!

.box  width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; > 

No, what you have done is a mistake

 class="box">Lorem ipsum dolor sit amet,  href="#">consectetur adipiscing elit. Quisque semper augue ac leo tincidunt euismod. 

Now run the code and see the result: Don’t worry, what you see is not a bug but it’s indeed the logical result of the flexbox algorithm (non-intuitive but logical). To understand this behavior let’s take a look into the specification:

Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents. Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

In our first case, we only have one sequence of text and this one will get wrapped into an anonymous block to become a flex item. There is no strange result in this case since the whole text is wrapped together. In the second case, things are different. We have an in-flow child (our link ) and on each side of it we have a sequence of text so we end up having 3 blocks: the link + 2 anonymous blocks for the text Now it becomes more clear. We have 3 boxes perfectly centered using flexbox following a row direction (the default one) but the result is not what we want at all. The fix in such a situation is easy: We simply add an extra wrapper around the text

 class="box"> Lorem ipsum dolor sit amet,  href="#">consectetur adipiscing elit. Quisque semper augue ac leo tincidunt euismod.
  

 class="box"> Lorem ipsum dolor sit amet,  href="#">consectetur adipiscing elit. Quisque semper augue ac leo tincidunt euismod.