如何隐藏溢出工作
我有一些没有隐藏文本溢出的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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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 -->
2 个答案:
答案 0 :(得分：1)
您还需要指定不希望文本换行，或指定overflow的高度才能工作。否则它假设它可以占用一些垂直空间来显示所有内容。
display: inline-block;
overflow-x: hidden;
width: 50%;
white-space: nowrap;
修改
您还可以添加text-overflow: ellipsis;，以便在文字太长时看到省略号！
您也可以使用全文，当它太长并被剪裁时，将文本传输到元素的title=""属性中，这样您就可以在悬停时看到整个文本：）
答案 1 :(得分：1)
在缺乏一些我们可以检查整个html层次结构的上下文方面，你的问题并不完全。以下是一些提示：
- 使用
overflow-ycss属性代替overflow-x - 使用
word-break来解决超出边界的长字 - 使用
white-spacecss属性
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？