HTML 5 基础之 文本 强制不换行

在我们开发网站的过程中常常会遇到文本被强制换行的情况发生,比如:

强制换行案例

图中一个完整的 a 标签被活生生截断(强制换行),这往往不是我们所想要的,但是这也是我们无法避免的,因为在网站开发过程中,我们往往无法做到精确计算出能够完美展示所容纳文本格式的空间大小。

遇到这种情况一般的处理思路要么想办法算距离,要么一点一点的调节以达到预期要求,但是,这样做既费时又费力,那么有什么办法能一劳永逸呢?

其实 CSS 为我们提供了 white-space 属性
通过设置

a{white-space:nowrap;}

可以规定一个完整的 a 标签中的文本不进行换行,修改后的效果如图:

修改后的效果图

当然不仅仅是 a 标签,在开发过程中我们可以对任意的一个文本整体设定这一属性,这样一来便不会出现一个整体被截断的情况了。


下面对 white-space 属性做一个小结:

white-space 属性指定元素内的空白怎样处理。

属性值

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,933评论 18 139
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 671评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,333评论 25 708
  • 北忆南凉年 南思北风暖 南北不知归路 天地 之大何处是归程 我为帝王 却奈何不了...
    my9311阅读 243评论 1 2
  • 今天早上打开手机朋友圈太多信息,本能的先看了华服二期朋友圈,第一眼就看到了任猫的分享文章如下: 训练心得 虽然时间...
    慧好聊吧阅读 284评论 0 1