[分享]css元素多出部位隐藏不换行

pre{ overflow:scroll; whitespace:nowrap; } 在使用CSS定义网页样式时，我们常常需要用到一种技巧，即让元素的多出部分隐藏，并且不会换行。这种技巧可以通过CSS...

pre{ overflow:scroll; white-space:nowrap; }

在使用CSS定义网页样式时，我们常常需要用到一种技巧，即让元素的多出部分隐藏，并且不会换行。这种技巧可以通过CSS中的overflow和white-space属性来实现。

overflow属性用来指定当元素的内容超出其指定大小时应该怎么显示。常见的值包括：

overflow:visible;  // 不剪切内容，允许其溢出元素框
overflow:hidden;   // 剪切内容，超出部分不可见
overflow:scroll;   // 剪切内容，超出部分自动增加滚动条
overflow:auto;     // 根据内容自动判断是否显示滚动条

white-space属性用来指定元素内部空白符的处理方式。常见的值包括：

white-space:normal;    // 合并连续空白符，换行符转换为空格
white-space:nowrap;    // 忽略换行符，强制在同一行显示
white-space:pre;       // 保留空白符，但连续空白符合并，换行符保留
white-space:pre-wrap;  // 保留空白符，连续空白符不合并，换行符保留
white-space:pre-line;  // 合并连续空白符，保留换行符

结合使用overflow和white-space属性，我们可以实现元素多出部位的隐藏且不换行的效果。例如：

div {
  width:200px;
  height:100px;
  overflow:scroll;
  white-space:nowrap;
}

上述代码定义了一个div元素，它的宽度为200像素，高度为100像素，当内容超出宽度时，自动增加滚动条，并且不允许换行。这样，我们就可以在一个固定大小的容器中显示任意长度的内容。