同一行中的两个div，一个div中的文本根据第二个div的宽度进行剪切 [英] Two divs in the same row with text in one div getting clipped based on the width of second div

问题描述

我想在一行中有两个div，左div的文本基于右div的宽度（div中的文本是动态生成的）被裁剪，因此我们不能固定这些div的宽度右div必须完全可见，而左div中的文本可以剪切）。此图显示了示例输出：

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

这里是代码的html部分：

 < div class =parent> 
< div class =text>此文本必须隐藏，如果它是溢出< / div> 
< div class =number> 88818888.333346< / div> 
< / div> 
  

有人可以帮我。

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

 < div class =parent> 
< div class =text> 
< div class =inner>如果
溢出，则此文本必须被隐藏< / 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/

I want to have two divs in a single row with the left div's text getting clipped based on the right div's width(the text in the div is dynamically generated) hence we cannot fix the widths of these divs(the text in the right div must be completely visible whereas the text in the left div can be clipped).This image shows the sample output:

here is the fiddle: http://jsfiddle.net/UzqLZ/1/

here is the html part of code:

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

Can someone help me with this.

解决方案

Here is one way of doing it.

You need to add an inner wrapper element around your text as follows:

<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>

Now use the following 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;
}

Apply display: table to .parent and specify the font-size and line-height.

Apply display: table-cell to .number and .text.

The .inner block will fill up the rest of the width not taken up by .number, and the text will wrap onto two or more lines. If you specify the height to be one line, then you can use overflow: hidden to hide the extra text.

Using word-break: break-all may be a good idea.

See demo at: http://jsfiddle.net/audetwebdesign/QBQVg/

这篇关于同一行中的两个div，一个div中的文本根据第二个div的宽度进行剪切的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！