How do get overflow hidden to work

Question

I have some css that is not hiding the text overflow. Here is the css in a snippet from my code:

$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>';

Here is the visual result in Chrome (lastest stable):

Fully rendered HTML (if that helps) from the screen shot segment shown:

<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

You also need to specify you don't want the text to wrap, or specify a height for overflow to work. Otherwise it assumes it can just take up some vertical space to show everything.

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

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

EDIT

You can also add text-overflow: ellipsis; so that you can see an ellipsis for when the text is too long!

You could also take the full text and, when it's too long and gets clipped, transfer the text into the title="" attribute of the element, so that you can see the whole thing on hover :)

Answer 2

You're question is not quite complete in terms of lacking some context where we can examine the whole html hierarchy. Here are some tips:

• Use overflow-y css property instead of overflow-x
• Use word-break to address long words going out of boundaries
• Use white-space css property