尝试修复此文本，使其不会一次转到一个字母

Question

这是一张图片，展示了当屏幕变小时这些文本块当前的作用：

我想修复它，让文字在屏幕变小时保持在一起，或者甚至图像变小？我已经尝试使用 vw 的字体大小，但它仍然会逐个字母地拆分单词。

这是它的当前 html：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-cell-row w3-center">
  <span class="w3-cell" style="width:100px">
    <img class="w3-section w3-margin-left" width="96px" height="96px" src="/CustomSpace/EndUserHome/Icons/MSConfigManage-02-WF_96px.svg">
  </span>
  <div class="w3-cell w3-xlarge w3-text-red">
    <div class="text-styling-bold" style="overflow-wrap: anywhere">Help, I Need Something</div>
  </div>
</div>

Answer 1

详细了解 responsive web 和 flex-box

.container{
  display: flex;
  flex: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
  <img class="w3-section w3-margin-left" width="96px" height="96px" src="/CustomSpace/EndUserHome/Icons/MSConfigManage-02-WF_96px.svg">
  <div class="w3-xlarge w3-text-red">
    <div class="text-styling-bold" style="overflow-wrap: anywhere">Help, I Need Something</div>
  </div>
</div>

W3.css不是专业图书馆，看看bootstrap and tailwind.css

尝试修复此文本，使其不会一次转到一个字母

Trying to fix this text so that it doesn't go to one letter at a time

html

css

text

cell