Question

我有以下列标题，我希望它显示如下

Known allergies Peanut Ace...

即用椭圆缩短的行。

我的代码可以工作，但是当我向样式添加display:block时，它会将一个范围放在另一个范围内。

它现在显示如下

    Known allergies
花生酱......

如何在同一行显示

<th border="0" >
    <span width="100%" onclick="dropdownResize()" style="padding-top:2px; white-space: nowrap; font-weight:normal;">&nbsp;
        <i>Known allergies </i>&nbsp;</span>
    <span id="allergiesSpan" style="white-space: nowrap; display: block ; overflow: hidden; 
    text-overflow: ellipsis; width:50%;"> 
    <b>Peanut, Aceti test test test tes test</b>&nbsp;</i></span>       
</th>

Answer 1

使用display：inline-block;而不是display：block

的Al

Answer 2

您可以float: left;具有display: block;

的部分

<th border="0" >
    <span width="100%" onclick="dropdownResize()" style="padding-top:2px; white-space: nowrap; font-weight:normal;">&nbsp;
        <i>Known allergies </i>&nbsp;</span>
    <span id="allergiesSpan" style="white-space: nowrap; display: block ; float: left; overflow: hidden; 
    text-overflow: ellipsis; width:50%;"> 
    <b>Peanut, Aceti test test test tes test</b>&nbsp;</i></span>       
</th>

Answer 3

display: block;使元素与其父元素一样宽。如果它们都是block并且需要彼此相邻，则必须为两个元素分配宽度。

我还看到您的示例代码给出了span宽度100%的第一个{{1}}。这可能导致第二元件被压下的问题。

Answer 4

为什么不将两个span元素都放在块div中，样式为“overflow：hidden; text-overflow：ellipsis;”。这样，溢出仍然会被隐藏，但你的元素将彼此相邻排列？

Answer 5

我还没有看到html的其余部分，但是当你使用表时，为什么不把两个不同的信息块放在两个不同的表格单元格中呢？

如果th本身的省略号不起作用，您始终可以在表格单元格中添加块级元素。

如何使用'display：block'打开两个跨度

5 个答案: