单行文本溢出加...的效果实现

如果对HTML的块级元素设置了宽度，那么当文本太长放不下的时候，它会自动换行，如果我们不想让它换行，我们可以用一下三段代码实现：

  white-space: nowrap; /* 文本不换行 */
  overflow: hidden;    /* 溢出文本隐藏 */
  text-overflow: ellipsis; /* 溢出文本省略

JSbin的代码展示

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1赞 92
  • 浏览器的工作原理：新式网络浏览器幕后揭秘
    简介网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输...
    wengjq阅读 2,080评论 2赞 15
  • HTML+CSS摘要
    本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,326评论 0赞 5
  • 十·CSS常用样式
    1.块级元素和行内元素 块级(block-level)元素；行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,055评论 1赞 4
  • Swift 设计模式-桥接模式(Bridge Pattern)
    桥接模式 桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，...
    ZackDt阅读 781评论 0赞 0