美文网首页
css 相关

css 相关

作者: riyihu | 来源:发表于2017-07-22 10:17 被阅读0次

1.CSS 强制不换行,文字溢出显示省略号~

css一共就三句话:

{

white-space: nowrap;

text-overflow:ellipsis;

overflow:hidden;

}

注释:

white-space: nowrap; 文本强制不换行;

text-overflow:ellipsis; 文本溢出显示省略号;

overflow:hidden; 溢出的部分隐藏;

取值:

clip : 默认值。不显示省略标记(...),而是简单的裁切

ellipsis : 当对象内文本溢出时显示省略标记(...)

white-space : normal | pre | nowrap 取值:

normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象

nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

overflow : visible | auto | hidden | scroll

取值:

visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto : 在必需时对象内容才会被裁切或显示滚动条

hidden : 不显示超过对象尺寸的内容

scroll : 总是显示滚动条

相关文章

  • css相关

    position: relative:对象遵循常规流,并且参照自身在常规流中的位置通过投票,bottom,righ...

  • css相关

    外边距叠加问题当两个外边距相遇时(中间没有border、padding等)凡是未形成块级格式化上下文(BFC)的盒...

  • css 相关

    1.CSS 强制不换行,文字溢出显示省略号~ css一共就三句话: { white-space: nowrap; ...

  • CSS相关

    ::after ::before rem 多个class属性的优先级 http://blog.csdn.net/...

  • Css相关

    color: ××× !important; 提高优先级,行内样式优先级最高。 DIV设置浮动后无法撑开外部DIV...

  • CSS相关

    1.两种盒模型 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(borde...

  • CSS相关

    居中 块元素水平居中 行内元素水平居中 模拟表格 实现水平居中display:table ( ) | table-...

  • CSS相关

    flex:flex-grow flex-shrink flex-basis flex-grow 默认为0,即如果...

  • css相关

    网页验证码是干嘛的,是为了解决什么安全问题区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛...

  • 2018前端面试总结

    前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络...

网友评论

      本文标题:css 相关

      本文链接:https://www.haomeiwen.com/subject/dtdjkxtx.html