处理 CSS3 中的文本溢出

text-overflow 属性用于在 CSS3 中确定如何向用户表示未显示的溢出内容。

语法

以下是 text-overflow 属性的语法 -

text-overflow: value;

值可以是 clip、ellipsis、string 和 initial。你可以使用 string 值设置任意文本。使用 ellipsis 值时，会显示代表裁剪文本的 ("...") 缩写。

以下是处理 CSS3 中文本溢出的代码 -

裁剪文本

在此示例中，溢出文本被裁剪，且无法使用具有值 clip 的 text-overflow 属性进行访问 -

.clip {
   text-overflow: clip;
}

示例

我们来看一个示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         white-space: nowrap;
         width: 100px;
         overflow: hidden;
         border: 1px solid #3008c0;
         margin: 10px;
         padding: 10px;
      }
      .clip {
         text-overflow: clip;
      }
   </style>
</head>
<body>
   <h1>Handling text overflow (clip)</h1>
   <div class="clip">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
   </div>
</body>
</html>

使用省略号表示裁剪的文本

在此示例中，溢出文本被裁剪，且无法使用具有值 ellipsis 的 text-overflow 属性进行访问 -

.clip {
   text-overflow: ellipsis;
}

示例

我们来看一个示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         white-space: nowrap;
         width: 100px;
         overflow: hidden;
         border: 1px solid #3008c0;
         margin: 10px;
         padding: 10px;
      }
      .ellipsis {
         text-overflow: ellipsis;
      }
   </style>
</head>
<body>
   <h1>Handling text overflow example (ellipsis)</h1>
   <div class="ellipsis">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
   </div>
</body>
</html>

使用任意字符串表示裁剪的文本

在此示例中，溢出文本被裁剪，且无法使用具有值 ellipsis 的 text-overflow 属性进行访问 -

.clip {
   text-overflow: " [..]";
}

示例

我们来看一个示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         white-space: nowrap;
         width: 100px;
         overflow: hidden;
         border: 1px solid #3008c0;
         margin: 10px;
         padding: 10px;
      }
      .myStr {
         text-overflow: " [..]";
      }
   </style>
</head>
<body>
   <h1>Handling text overflow example (string)</h1>
   <div class="myStr">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
   </div>
</body>
</html>

更新于：31-10-2023

157 次浏览

启动您的事业

完成课程认证

开始
广告