我怎樣才能使兩個跨在與同一行的「顯示：塊」上

我有以下的列標題，我希望它可以顯示下我怎樣才能使兩個跨在與同一行的「顯示：塊」上

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>

來源

2011-02-23 Dave819

爲什麼你想讓他們在同一行，並有顯示：塊設置？爲什麼不把他們保持聯機？ – Marcin 2011-02-23 15:15:14

@marcin溢出：隱藏;文本溢出：省略號;不工作，除非他們在塊 – Dave819 2011-02-23 15:20:38

你可以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>

來源

2011-02-23 15:11:43

這裏是一個樣本http://jsbin.com/ubaco6/edit – 2011-02-23 15:14:41

它不工作。花生等現在在左邊，但在它上面，多一點在右邊是'已知的過敏' – Dave819 2011-02-23 15:23:00

對不起，在沒有更多信息的情況下無法修復 - 你能提供一個「演示」還是屏幕截圖也能工作......？ – 2011-02-24 08:51:08

display: block;使元素與其父元素一樣寬。如果兩個元素均爲block並且需要彼此相鄰，則必須爲這兩個元素分配一個寬度。

我還看到你的示例代碼給出了第一個span的寬度爲100%。這可能會導致第二個元素被推下的問題。

來源

2011-02-23 15:14:01

我將它們的大小更改爲許多組合，但仍然沒有任何結果 – Dave819 2011-02-23 15:26:28

爲什麼不把span元素放在塊div中，樣式爲「overflow：hidden; text-overflow：ellipsis;」。這樣，溢出仍然會隱藏起來，但是你的元素將會彼此相鄰放置？

來源

2011-02-23 15:23:37 Marcin

即使將第二個跨度向下推動 – Dave819 2011-02-23 15:28:42

即使跨度仍顯示爲內聯，並且您停止將第一個寬度設置爲100％？ – Marcin 2011-02-23 15:33:07

我還沒有看到其餘的html，但是當你使用一個表格時，爲什麼不把這兩個不同的信息塊放在兩個不同的表格單元中呢？

如果th本身的省略號不起作用，您可以隨時在表格單元格中添加塊級元素。

來源

2011-02-23 15:45:57 jeroen

使用display：inline-block;而不是顯示：塊

鋁

來源

2011-02-23 17:28:49 AlanG

這在舊版瀏覽器（例如IE6）中不起作用 – 2011-02-24 08:49:54

它支持原始內聯元素（如跨度）的內聯塊http://www.quirksmode.org/css/display.html另外如果IE6支持是所需的文本溢出：elipses不起作用。 – AlanG 2011-03-10 10:09:43

我怎樣才能使兩個跨在與同一行的「顯示：塊」上

回答

相關問題