css - 如何让溢出隐藏起来工作

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="" 属性中，这样您就可以在悬停:)