CSS超出...

一、CSS超出显示省略号

当内容超出了容器的最大宽度或高度时，可以使用“text-overflow”属性来实现省略号的效果。为了使这个效果生效，还需要将“white-space”属性设置为“nowrap”，它的作用是禁止内容换行。

   .container {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

二、CSS超出宽度省略号

此效果与上一个效果类似，但不同的是，在这种情况下，省略号将显示在文本或内容的末尾。同样需要将“white-space”属性设置为“nowrap”。

   .container {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
   }
   .long-content {
      display: inline-block;
      white-space: nowrap;
   }

三、CSS超出隐藏

当需要隐藏超出容器的内容时，可以设置“overflow”属性为“hidden”。

   .container {
      width: 200px;
      height: 50px;
      overflow: hidden;
   }

四、CSS超出一行变省略号

当内容过长时，只需将“max-height”属性设置为一行的高度，并将“text-overflow”设置为“ellipsis”。

   .container {
      max-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
   }

五、CSS超出换行

如果需要每次超出内容自动换行，可以将“word-wrap”和“word-break”属性设置为“break-word”。

   .container {
      width: 200px;
      word-wrap: break-word;
      word-break: break-word;
   }

六、CSS超出加滑轮

当容器的最大宽度和高度固定时，可以设置“overflow”属性为“auto”，这将自动显示一个滚动条。

   .container {
      width: 200px;
      height: 100px;
      overflow: auto;
   }

七、CSS超出部分隐藏

在文本的开头或结尾处显示省略号。

   .container {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   .content {
      display: inline-block;
   }

八、CSS超出部分显示省略号

省略号显示在超出容器的末尾。

   .container {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
   }
   .content {
      white-space: nowrap;
      display: inline-block;
   }

九、CSS超出不边框省略

可以使用“clip”属性实现不使用边框的超出省略。

   .container {
      width: 200px;
      height: 100px;
      position: relative;
      border: none;
   }
   .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      clip: rect(0, auto, auto, 0);
   }