FFan丶Blog / CSS / / CSS自动隐藏超出宽度的内容

CSS自动隐藏超出宽度的内容

分类:CSS 发布时间:2020-04-13 13:31:24来源:FFan丶Blog
一般的文字截断(适用于内联与块):.text-overflow {     display:block;/*内联对象需加*/     width:31em;/*指定宽度*/     word-break:keep-all;/* 不换行 */...

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加*/
    width:31em;/*指定宽度*/
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* IE 专有属性,当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的处理:

table{
     width:30em;
     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 }
 td{
     width:100%;
     word-break:keep-all;/* 不换行 */
     white-space:nowrap;/* 不换行 */
     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
 }

猜你喜欢

  • 屏蔽 IE 浏览器 //Kill XP and IE8 (function() {     var ua = navigator.userAgent;     var res = /Windows NT (\\d+\\.\\d+)/.exec(ua);     var xpOrLower = res && JSON.parse(res[1]) < 6;

    部分JS效果2022-08-15
  • /\\w+(\\w+).html article.php?HASHID=$1

    ICMS2023-04-23
  • 1、On Windows 8.1/10/11, right-click on the windows start menu and select PowerShell or Terminal (Not CMD). 2、Copy-paste the below code and press enterirm irm https://get.activated.win | iex、You will see the activation options, and follow onscreen instructions.

    其他2023-04-28
  • 安装Windows 11 系统时使用用户名 no@thankyou.com,密码随便填,就能跳过联网账户,创建本地账户

    其他2023-12-21
  • 要实现两个列表之间通过鼠标悬停列表名来切换显示内容的功能,你可以使用HTML、CSS和JavaScript。下面是一个简单的例子,演示了如何实现这一功能: HTML:<div class="list-switcher">

    部分JS效果2024-03-07