Question

我有一些CSS不隱藏文本溢出。這裏是一個片段的CSS從我的代碼：

$html .= '<span style="display: inline-block; overflow-x: hidden; width: 30%">' . $row[2] . '</span>'; 
$html .= '<span style="display: inline-block; overflow-x: hidden; width: 50%">' . $row[2] . '</span>'; 

這裏是視覺效果在Chrome（最新的穩定）：

完全呈現HTML（如果那幫助）從屏幕顯示拍攝段：

<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0103');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0103');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Toronto Pearson Airport</span><span style="display: inline-block; overflow-x: hidden; width: 50%">NY, CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0305');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0305');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Trailer Building</span><span style="display: inline-block; overflow-x: hidden; width: 50%">310 Rainbow Boulevard, US</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0272');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0272');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Travel Lodge</span><span style="display: inline-block; overflow-x: hidden; width: 50%">9401 NFB, (Old Thrift Lodge), US</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0130');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0130');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelers Budget Inn</span><span style="display: inline-block; overflow-x: hidden; width: 50%">9001 Niagara Falls Blvd., Niagara Falls, NY, 14304, US</span><span style="display: inline-block; width: 20%">716-297-3228</span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0251');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0251');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelodge Bonaventure</span><span style="display: inline-block; overflow-x: hidden; width: 50%">7737 Lundy's Lane, CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0314');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0314');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelodge Hotel By the Falls</span><span style="display: inline-block; overflow-x: hidden; width: 50%">5257 Ferry Street, CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0127');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0127');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelodge near the Falls</span><span style="display: inline-block; overflow-x: hidden; width: 50%">5257 Ferry St., CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0135');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0135');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelodge Niagara Falls Bonaventure</span><span style="display: inline-block; overflow-x: hidden; width: 50%">7737 Lundys Lane, Niagara Falls, ONT, L2H 1H3, CA</span><span style="display: inline-block; width: 20%">905-374-7171</span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0234');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0234');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Travelodge, Clifton Hill</span><span style="display: inline-block; overflow-x: hidden; width: 50%">4943 Clifton Hill, Niagara Falls, ONT, L2G 3H5, CA</span><span style="display: inline-block; width: 20%">800-668-8840</span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0139');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0139');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Universal Inn and Suites</span><span style="display: inline-block; overflow-x: hidden; width: 50%">6000 Stanley Ave, CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0172');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0172');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Via Rail Train Station</span><span style="display: inline-block; overflow-x: hidden; width: 50%">4267 Bridge St., CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0253');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0253');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div><span style="display: inline-block; overflow-x: hidden; width: 30%">Victoria Motor Inn</span><span style="display: inline-block; overflow-x: hidden; width: 50%">5869 Victoria Avenue, CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 
<div class="listWrapper clear"><div class="listIcon" style="width:48px; height:16px"><input src="../system/themes/simple/images/edit.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#locationID').val('0221');" title="Update" type="image">&nbsp;<input src="../system/themes/simple/images/delete.png" alt="Delete button" class="submitButton" onclick="$('#action').val('delete');$('#locationID').val('0221');" title="Click this button to proceed to delete this location" type="image"></div><!-- end .listIcon --><div class="listItem"><div class="rowhighlight"><span style="display: inline-block; overflow-x: hidden; width: 30%">Victorian Charm B&B</span><span style="display: inline-block; overflow-x: hidden; width: 50%">6028 Culp St., CA</span><span style="display: inline-block; width: 20%"></span></div><span style="color:#999;font-style:italic;padding-left:8px;"></span></div><!-- end .listItem --></div><!-- end .listWrapper --> 

Answer 1

你還需要指定你不希望文本換行，或指定overflow工作的高度。否則，它認爲它可以佔用一些垂直空間來顯示一切。

http://jsfiddle.net/r3Crd/1/

display: inline-block; 
overflow-x: hidden; 
width: 50%; 
white-space: nowrap; 

編輯

您還可以添加text-overflow: ellipsis;，這樣你可以看到當文本太長省略號！

你也可以把全文及，當它的時間過長，將被剪掉，文字轉移到元素的title=""屬性，因此，你可以看到在懸停:)

Answer 2

你」整個事情在缺乏一些我們可以檢查整個html層次的上下文方面，問題並不完全。這裏有一些提示：

• 使用overflow-y CSS屬性，而不是overflow-x
• 使用word-break解決長期的話走出去的CSS屬性