非table格式的省略显示-优快云博客

本文介绍如何在HTML中实现非table格式的一行省略显示，通过使用div、span、label等标签配合CSS样式来实现文字内容的省略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

非table格式的省略显示（div、span、label等标签包裹的文字一行省略显示）

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>非table格式一行省略显示</title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
    <style type="text/css">
    .shengLue_h{
        border:1px solid red;
        width:100px;
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        display: inline-block;   /*需与overflow:hidden;一起使用。将对象呈递为内联对象*/
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        -o-text-overflow:ellipsis;
    }
    </style>
</head>
<body>
     <div>
         <label class="shengLue_h">
               次速度发空间才才，路口打破迷关；上东风路速度发急哦
         </label>
     </div>
      <span class="shengLue_h">
         次速度发空间才才，路口打破迷关；上东风路速度发急哦
     </span>
     <div class="shengLue_h">
          次速度发空间才才，路口打破迷关；上东风路速度发急哦
     </div>
</body>
</html>

运行后代码效果如下：