• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

css 整个英文单词不换行怎么实现

武飞扬头像
PHP中文网
帮助98

css 整个英文单词不换行怎么实现?

css中英文单词换行的问题

单词换行的问题

在项目中有时候会遇到英文很长的句子,然后当div剩下的部分不足以放下一个单词的时候,单词就会换行显示,这样的话尾部就会空了很大的地方显得很不好看

解决方法

可以通过两个css属性来实现这个需求:

word-wrap:break-word;
word-break:break-all;

word-wrap

word-wrap用来控制换行,有两种值:

  normal
  break-word(这个值用来强制换行的,内容将在边界内换行,在中文中是没有任何问题,英文语句也是没有任何问题,但是对于很长的英文来说就不起作用了)

word-break

word-break用来控制是怎么断词的。有三种取值:

  break-all(是断开单词,在单词到边界的时候,下个字幕自动到下一行,主要是解决了长串英文单词断词的问题)
  keep-all(指的是不断词,一句话就是一行)

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfcfij
系列文章
更多 icon
同类精品
更多 icon
继续加载