资讯专栏INFORMATION COLUMN

css处理文本溢出

wuyumin / 588人阅读

css:

 

.box{
    width: 100px;
    overflow:hidden; 
    white-space:nowrap;
    text-overflow:ellipsis; 
}

 

white-space: 不换行。强制在一行显示。

 

text-overflow: 处理溢出的文本: 以省略号代替。

 

 

 

 

 

 

 

 

 

 

1

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1531.html

相关文章

  • css实现文本溢出隱藏

    摘要:实现文本溢出显示省略号在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。 css实现文本溢出显示省略号 在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。 基础设置 在介绍下面的方法之前,我们先对所有的例子进行基础的样式设置 /*基础设置*/ div.box{ width: 100px; ...

    saucxs 评论0 收藏0
  • 谈谈如何用CSS处理文本格式

    摘要:一个长单词超出整个容器宽度时是否换行必须注意到,这是一个长单词便超出容器宽度的情况,而且只需考虑英文,中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。 前言 文本方面的CSS内容不少,但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么,今天仅仅来谈谈其中最复杂的部分——文本格式。 处理换行、空格和Tab:white-space 众所周知,...

    source 评论0 收藏0
  • 【前端芝士树】纯CSS实现多行文本溢出显示省略号

    摘要:前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性,它没有出现在规范草案中,为了实现该效果,它需要组合其他外来的属性。 【前端芝士树】纯CSS实现多行文本溢出显示省略号 使用-webkit-line-clamp来控制行数 由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(u...

    CNZPH 评论0 收藏0
  • CSS 文本控制

    摘要:学习一些文本控制的属性,防止做傻事。是的升级版,当单行文本过长,超过文本边界时自动换行。否则,文本仍然左对齐。 one more time one more chance. 一歩重头学前端, css入门。 学习一些 CSS 文本控制的属性,防止做傻事。请大家对照下面列表检验下: 会的、不会的、似懂非懂的。笔者是一个也不会。 white-space text-overflow: ell...

    Taonce 评论0 收藏0
  • CSS - 纯css实现多行文本溢出省略(兼容所有浏览器)

    摘要:前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果,但麻烦且不是很靠谱,今天就用纯来实现一个完全兼容的多行省略。 前言 多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻烦且不是很靠谱,今...

    李义 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<