zoukankan      html  css  js  c++  java
  • CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法。

      现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:
    代码一:用于非表格LI或span等都可以

     www.169it.com

    .text-overflow { 
    display:block;/*内联对象需加*/ 
    31em; 
    word-break:keep-all;/* 不换行 */ 
    white-space:nowrap;/* 不换行 */ 
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/ 
    }

    代码二:用于表格

    table{ 
    30em; 
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */

    }

    td{
    100%; 
    word-break:keep-all;/* 不换行 */ 
    white-space:nowrap;/* 不换行 */ 
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/

    }

    本文来源:CSS控制长文本内容显示(截取的地方用省略号代替)

  • 相关阅读:
    30分钟掌握ES6/ES2015的核心内容(上)
    rem 响应式用法
    angular框架MVVM
    vue3 + vite + elmentui
    vue3 + vite + elmentui
    vue3 + vite 开发新项目
    滚动条滚动加一个进度条
    jquery 截取页面 url ,切换新的url 跳转
    h5,css3
    前端模板预编译技术
  • 原文地址:https://www.cnblogs.com/besty/p/3919601.html
Copyright © 2011-2022 走看看