Javascript 同一行中的两个div（在箭头形状的父div中），其中一个div中的文本将根据第二个div的宽度进行剪裁

这是一个

HTML

<div  class="Right green">
    <h2>
        <div class="number colorV"> 8.123456 </div>
        <div id="text"> huh-fjiuetie</div>
    </h2>
    <div  class="Right-after green-after"></div>
</div>

8.123456
哈，福尤埃蒂

条件是：

h2

标记内的两个

div

必须在同一行上

类为“.number”的div。必须灵活，其内容是可变的

.text

div中的内容根据number div中的内容进行剪裁（宽度不能固定，因为number div中的内容是动态生成的）

背景色也不是固定的（因此，我们无法将背景色固定到数字div，以便根据需要执行此操作）

---

如果您有任何建议，我们将不胜感激。

基于前面的相关问题，您可以尝试以下方法

按如下方式修改HTML：

<div class="Right green">
    <div class="table-wrap">
        <div class="text-cell">
            <div class="inner">huh-fjiuetie</div>
        </div>
        <div class="number-cell colorV">8.123456</div>
    </div>
    <div class="Right-after green-after"></div>
</div>

请参见演示：

CSS有两个部分

与

.Right

和

.green

相关的规则会处理绿色阴影和箭头图案。 这将建立一个定义良好的块级容器

div.Right

块包含一个子块

.table wrap

，该子块将包含文本和数字，并将采用前面所示的剪辑方式：

---

添加子块，

。就在

生成箭头图案之后。

基于前面的相关问题，您可以尝试以下操作

按如下方式修改HTML：

<div class="Right green">
    <div class="table-wrap">
        <div class="text-cell">
            <div class="inner">huh-fjiuetie</div>
        </div>
        <div class="number-cell colorV">8.123456</div>
    </div>
    <div class="Right-after green-after"></div>
</div>

请参见演示：

CSS有两个部分

与

.Right

和

.green

相关的规则会处理绿色阴影和箭头图案。 这将建立一个定义良好的块级容器

div.Right

块包含一个子块

.table wrap

，该子块将包含文本和数字，并将采用前面所示的剪辑方式：

---

添加的子块，

。就在

之后生成了箭头图案。

Lol，您可以在解释中使用div名称吗，否则会很复杂，很抱歉混淆！！编辑了问题L，你能在解释中使用div名称吗，否则会很复杂，抱歉混淆！！编辑问题