點燈坊

失くすものさえない今が強くなるチャンスよ

Using w-max to Set the Largest Width without Wrapping

Sam Xiao's Avatar 2022-01-21

We can use w-max to let the content decide the largest width of the box without wrapping.

Version

TailwindCSS 3.0

w-max

max000

The box’s width is determined by the whole paragraph without wrapping.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div class="w-max">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
</html>

Line 10

<div class="w-max">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
  • w-max : the ideal size a box can take without wrapping its content. The final width is decided by the size a box needs to contain all of its content without being wrapped or it overflows the box

whitespace-nowrap

max000

We can also implement w-max by whitespace-nowrap.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div class="whitespace-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
</html>

Line 10

<div class="whitespace-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
  • whitespace-nowrap : is equivalent to w-max

figure

max001

We often use w-min for <figure> with <img> and <figcaption>. When w-max is used with <figure>, which is not wrapping.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <figure class="w-max">
    <img src="https://picsum.photos/300/200/?random=10">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda debitis, doloremque, earum id inventore laborum minus neque quam quasi quia quos reiciendis sequi suscipit tempora totam, ut veniam.</figcaption>
  </figure>
</body>
</html>

Line 10

<figure class="w-max">
  <img src="https://picsum.photos/300/200/?random=10">
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda debitis, doloremque, earum id inventore laborum minus neque quam quasi quia quos reiciendis sequi suscipit tempora totam, ut veniam.</figcaption>
</figure>
  • w-max : <img>‘s ideal width is 300px. <figcaption>‘s ideal width without wrapping is larger than <img>. So <figcaption> decides the final width of w-max

Conclusion

  • w-min is often used with <figure>, not w-max. We only use w-max with <figure> for demo

Reference

Ibadehin Mojeed, Understanding min-content, max-content, and fit-content in CSS

# TailwindCSS