• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 text

css3手册 薛 陈磊 588次浏览 0个评论 扫描二维码

在页面文本中,CSS3加入了几个新的文本功能,也是下面要讲解的三个new features:text-overflow 、word-wrapword-break

其实text-overflow不是css3退出的,在此之前text-overflow就常用于控制文本显示长度中,而css3中text-overflow新加一个ellipsis属性,text-overflow用于文本超出控制;来看一下clip和ellipsis的功效:

css3 text

代码如下:

p.p1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.p2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

很简单,其中在ellipsis出现之前,很多实用js或者数据源截取的,容易造成标签缺失,又了这个属性后文本省略就容易多了;

CSS3 word-wrap提供了单个词汇换行的机制,在英文中,不带空格的连续英文会被认为是一个单词而不会被换行,例如:

css3 text

而加上word-wrap:break-word后:

css3 text

其实就是强制换行的意思;

CSS3 word-break提供了文本换行机制,定义每行文本到末尾的时候才换行,清除单个单词长度的因素,示例如下:

css3 text

控制的css如下:

p.p1 {
    width: 140px; 
    border: 1px solid #000000;
    Word-break: keep-all;
}

p.p2 {
    width: 140px; 
    border: 1px solid #000000;
    Word-break: break-all;
}


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 text
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址