当前位置：首页 > 行业动态 > 正文

html保持字体一行

在CSS中使用 white-space: nowrap;

保持HTML字体在一行显示的方法

使用CSS控制文本换行

属性 作用 示例代码 效果
white-space: nowrap; 强制文本在一行显示，不换行 css<div style="white-space: nowrap;">长文本不换行</div> 文本超出容器宽度时会溢出显示
overflow: hidden; 隐藏超出容器的文本 css<div style="white-space: nowrap; overflow: hidden;">长文本不换行</div> 超出部分被裁剪，不显示
text-overflow: ellipsis; 在溢出文本末尾显示省略号 css<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">长文本不换行</div> | 超出部分显示为

HTML标签方法（已废弃）

作用 说明
<nobr> 强制文本不换行 该标签已被废弃，建议使用CSS替代
<span> + style 通过内联样式控制 <span style="white-space: nowrap;">文本</span>

组合使用CSS属性

场景 解决方案 示例代码
按钮文本单行显示 设置display: inline-block;并控制宽度 css<button style="display: inline-block; width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">超长按钮文本</button>
表格单元格内容单行 对<td>或<th>设置white-space: nowrap; css<table><tr><td style="white-space: nowrap;">长文本不换行</td></tr></table>

常见问题与解答

问题1：如何让超长文本在单行显示时显示省略号？

解答：
需同时满足以下条件：

  1. 设置white-space: nowrap;（禁止换行）
  2. 设置overflow: hidden;（隐藏溢出内容）
  3. 设置text-overflow: ellipsis;（显示省略号）
    示例： 

    <div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
 这是一个超长文本示例，用于测试省略号效果。
</div>

问题2：为什么用了white-space: nowrap;文本还是换行了？

解答：
可能原因：

  1. 父容器宽度不足,导致文本自动换行（需检查容器宽度或使用overflow: hidden;）。
  2. 元素本身是块级元素（如<div>），需配合display: inline-block;或固定宽度。
  3. 存在其他CSS规则干扰（如word-break: break-all;
CSS文本控制单行显示文本
0

相关文章