I was given a CSS test

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reproduced in full without authorization, as long as the original author, source and links in the article are retained.

Some time ago @ quick call me Han adult private letter I tested me the following topic:

The words in the screenshot are slightly smaller, so I rearranged them:

Requirements:

~~The maximum width of the P label cannot be greater than 10% of the H2 label text width~~
The maximum width of the P tag is determined by the width of the previous anonymous inline element (i.e., the width of the large font), as shown in the final expected GIF.

H2 tag cannot lose height (H2 text height + P tag height = H2 tag height)

HTML structure (no modification allowed)
<h2>
IPHONE XR<br>
IS THE FUCKING<br>
BEST EVER MADE
<p>iPhone XR has not been authorized as required by the rules of the Federal Communications Commission. iPhone XR is not, and may not be, offered for sale or lease, or sold or leased, until authorization is obtained.</p>
</h2>Copy the code
Basic CSS styles
h2{
    font-size: 52px;
    font-weight: bold;
    color: #000;
}
p{
    font-size: 12px;
    color: #333;
}Copy the code
Effect of initial

Expect effect

If you have any ideas, you can write the corresponding CSS code in the “Your CSS” area of this online demo page (open in Chrome), and you can see the real-time effect:

Now you can start thinking about how to do that… If you have no idea, or want to see other people’s implementation, you can continue to read.

Two, several layout implementation methods

To show you my implementation:

h2 {
    width: min-content;
    white-space: nowrap;
}
p {
    white-space: normal;
}Copy the code

You can click here: min-content under the layout implementation demo

The effect is shown in the screenshot below:

By default, the width should be the width of the narrowest word. Since white-space:nowrap is set, the width should be the width of the longest line of characters. Since the P tag is set to white-space:normal, the final width is the width of the longest line of the large-size header, which is the desired result. If you are not familiar with min-content, see the article “Understanding CSS3 Max /min-content and Fit-Content width values”.

Here is the author’s implementation:

h2 {
    display: table;
}
p {
    display: table-caption;
    caption-side: bottom;
}Copy the code

You can click here: min-content under the layout implementation demo

The effect is shown in the screenshot below:

This approach is better and more compatible (IE8+).

Display: table-texted element display horizontal display as table title, automatically adaptive to the outer table container width, caption-side:bottom The display:table element is “shrink-to-fit” when the width of the table element is auto. Therefore, the desired effect is achieved.

Welcome to add your implementation method

CSS various attributes like constitute the basic elements of the world, to achieve a certain effect, there are often a variety of combinations, each has its own advantages and disadvantages, I believe that the layout of the implementation here will have other methods, welcome to supplement, give advice.

Of course, if you have a good CSS skills, but also welcome to communicate with me, I can also test!

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.

I was given a CSS test