如何使文本适合所有div的宽度？

Question

我的网站上有一个街区，上面写着用户的工作价格。所有用户的工作价格不同，因此，如果文本长度超过5个字母，则文本将不适合父块。

如果可能的话，我想不用JavaScript代码来解决这个问题

Answer 1

我认为您仅有的两个选择是调整“框”的或字体大小。我会尝试在您的“盒子”上使用display: inline;或display: inline-block，而不是明确设置宽度。这样，它应该始终与文本的匹配。

.box {
  display: inline;
  background: #cccccc;
  margin: 5px;
  padding: 10px;
}

<div class="box">
 100 $
</div>
<div class="box">
 1000 $
</div>
<div class="box">
 1000 $
</div>

Answer 2

您有四个选择：

1. 使所有灰色块变长
2. 给每个灰色块一个动态的width
3. 使所有文本变小
4. 为每个文本提供动态的font-size

选项1）和3）的优点是使页面具有统一的外观。

选项2）和4）的优点是仅在必要时更改灰色块（及其包含的文本）的外观。

如果您为display: inline-block声明div且未为该width显式设置div，则它将基于其内容具有隐式宽度。参见以下示例。

使用动态宽度的示例：

div {
position: relative;
display: inline-block;
margin: 12px 6px;
padding: 12px;
font-size: 24px;
text-align: center;
color: rgb(0, 127, 0);
background-color: rgb(227, 227, 227);
border-radius: 6px;
}

<div>3000₽</div>
<div>300000₽</div>
<div>300000000₽</div>

Answer 3

在不使用JS查询宽度的情况下，唯一的选择是更改框的大小或更改文本的大小。