點燈坊

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

Adjusting Text Alignment by the Content

Sam Xiao's Avatar 2022-01-19

The content from API may be short like one or two words, or lengthy like more than one line. We want to adjust the text alignment of the content by CSS automatically.

Version

Alpine 3.7
TailwindCSS 3.0

inline-block

center000

  • click Add content to add more and more String to content
  • When content is only only one line, it is aligned to the horizontal center
  • When content is more than one line, it is aligned to the horizontal left
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body x-data="{ content: '' }">
  <div>
    <button @click="content += 'TailwindCSS '" class="text-gray-800 bg-gray-200 rounded-lg px-3 py-1">Add content</button>
  </div>
  <div class="text-center">
    <div class="inline-block text-left" x-text="content"></div>
  </div>
</body>
</html>

Line 10

<body x-data="{ content: '' }">
  • content : define content variable to hold String to display

Line 12

<button @click="content += 'TailwindCSS '">Add content</button>
  • @click : the content is getting bigger and bigger

Line 14

<div class="text-center">
  <div class="inline-block text-left" x-text="content"></div>
</div>
  • text-center : make the child element horizontal center
  • inline-block : make the element shrink to fit the content. If the content is one line only, the width of the element is shrunk, and text-center makes the element horizontal center
  • text-left : if the content is more than one line, the element’s width is as the parent element. text-center doesn’t work, but text-left makes the content align to horizontal left
  • x-text : display the growing content

table

center000

The same result but using table.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body x-data="{ content: '' }">
  <div>
    <button @click="content += 'TailwindCSS '" class="text-gray-800 bg-gray-200 rounded-lg px-3 py-1">Add content</button>
  </div>
  <div class="table mx-auto" x-text="content"></div>
</body>
</html>

Line 14

<div class="table m-auto" x-text="content"></div>
  • table : make the width of element shrink to fit the content, not the parent element’s width anymore
  • mx-auto : if the content is one line only, adjust the horizontal margin automatically to make the element horizontal center

If the content is more than one line, mx-auto doesn’t work. The width of the element is just like the parent element’s width, text-left is the default utility of the element, which can be omitted

w-fit

center000

The same result but using w-fit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body x-data="{ content: '' }">
  <div>
    <button @click="content += 'TailwindCSS '" class="text-gray-800 bg-gray-200 rounded-lg px-3 py-1">Add content</button>
  </div>
  <div class="w-fit mx-auto" x-text="content"></div>
</body>
</html>

Line 14

<div class="w-fit m-auto" x-text="content"></div>
  • w-fit : make the width of element shrink to fit the content, not the parent element’s width anymore
  • mx-auto : if the content is one line only, adjust the horizontal margin automatically to make the element horizontal center

If the content is more than one line, mx-auto doesn’t work. The width of the element is just like the parent element’s width, text-left is the default utility of the element, which can be omitted

Conclusion

  • inline-block, table or w-fit all make the width of the element shrink to fit the content. This is the key point we can adjust the text alignment by the content

# TailwindCSS