1

我想在一行中有两个 div，左 div 的文本根据右 div 的宽度被剪裁（div 中的文本是动态生成的）因此我们无法修复这些 div 的宽度（右 div 中的文本必须完全可见，而左侧 div 中的文本可以被剪裁）。此图像显示示例输出： 所附图像显示了示例输出。

这是小提琴：http: //jsfiddle.net/UzqLZ/1/

这是代码的html部分：

<div class="parent">
    <div class="text">This text must be hidden if it is overflowing</div>
    <div class="number">88818888.333346</div>
</div>

有人可以帮我弄这个吗。

4

2 回答 2

1

这看起来如何：http: //jsfiddle.net/P6Nbg/

我已经为数字 div 提供了相对的父位置和白色的背景颜色，因此它隐藏了下面的文本。

.parent {
    width: 30%;
    position: relative;   
    overflow: hidden;
}

.number {
    display: inline-block;
    position: relative;
    background-color: white; 
    float:right;
}

.text {
    display: inline-block; 
    position: absolute;
    background-color: transparent;
    white-space:no-wrap;
    overflow:hidden;
    float:right;
}
于 2013-10-03T11:27:59.203 回答
1

这是一种方法。

您需要在文本周围添加一个内部包装元素，如下所示：

<div class="parent">
    <div class="text">
        <div class="inner">This text must be hidden if 
                           it is overflowing</div>
    </div>
    <div class="number">88818888.333346</div>
</div>

现在使用以下 CSS：

.parent {
    display: table;
    width: 30%;
    border: 1px dotted blue;
    font-size: 1.00em;
    line-height: 1.50em;
}
.number {
    display: table-cell;
    border: 1px dotted blue;
}
.text {
    display: table-cell;
}
.inner {
    height: 1.50em;
    overflow: hidden;
    word-break: break-all;
}

应用于display: table并.parent指定字体大小和行高。

适用display: table-cell于.number和.text。

该.inner块将填满 未占用的其余宽度.number，并且文本将换行到两行或多行。如果将高度指定为一行，则可以使用overflow: hidden隐藏多余的文本。

使用word-break: break-all可能是个好主意。

参见演示：http: //jsfiddle.net/audetwebdesign/QBQVg/

于 2013-10-03T11:28:16.157 回答