css文字不换行

作者：半写的温柔ノ发布日期:2025-03-17 浏览:81

/* 示例代码：防止文字换行 */

/* 使用 white-space 属性 */
p {
  white-space: nowrap;
}

/* 解释说明：
white-space: nowrap; 表示文本中的空白会被压缩，且文本不会在到达容器边界时换行。
即使文本超出容器的宽度，它也会保持在同一行内显示。
*/

/* 另一个示例：结合 overflow 和 text-overflow 属性 */
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

/* 解释说明：
1. white-space: nowrap; 防止文字换行。
2. overflow: hidden; 当文本超出容器宽度时，隐藏溢出部分。
3. text-overflow: ellipsis; 当文本被截断时，在末尾显示省略号（...）。
4. width: 200px; 设置容器的固定宽度。
*/

上一篇：css滚动条样式修改

下一篇：css鼠标悬停样式