javascript - 同一行中的两个 div(在箭头形的父 div 中)，其中一个 div 中的文本根据第二个 div 的宽度被剪裁

Question

这是一个 jsfiddle link of my issue

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>

条件是:

1. h2 标签内的两个 div 必须在同一行。
2. 类为`.number 的div。必须是灵活的，它的内容是可变的。
3. .text div 中的内容根据数字 div 中的内容进行裁剪(宽度不能固定，因为数字 div 中的内容是动态生成的)
4. 背景颜色也不固定(因此我们无法将背景颜色固定到数字 div 以按要求进行)

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

Answer 1

根据较早的相关问题，您可以尝试以下操作。

按如下方式修改您的 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:

body {margin: 0;} /* Note: learn about reset style sheets... */

/* The following takes care of the shadow/coloring/arrow styling */
.Right {
    position: relative;
    width: 80%;
    margin-right: 50px;
    margin-top: 4%;
}
.Right-after {
    content:"";
    position:absolute;
    top: 0;
    width: 0;
    border-style: solid;
    border-width: 3.3em 0 3.3em 3.3em;
    right:-3.2em;
}
.colorV {
    color:#dbdcde;
}
.green {
    background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
    border-color: transparent transparent transparent #1d9755;
}

/* The following takes care of the test clipping */
.table-wrap {
    display: table;
    width: 100%;
    height: 200px; /* this may be optional... */
    font-size: 1.00em;
    line-height: 1.50em;
    font-size: 5.0em;
}
.number-cell {
    display: table-cell;
}
.text-cell {
    display: table-cell;
}
.inner {
    height: 1.50em;
    overflow: hidden;
    word-break: break-all;
}

查看演示:http://jsfiddle.net/audetwebdesign/uKryj/

CSS 有两部分。

与.Right 和.green 相关的规则处理绿色阴影和箭头图案。这建立了一个明确定义的 block 级容器。

div.Right block 包含一个子 block .table-wrap，它将包含文本和数字，并将采用前面所示的剪裁:

Two divs in the same row with text in one div getting clipped based on the width of second div

添加子 block ，.Right-after 生成箭头图案。