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;一起使用。*/
 }

猜你喜欢

  • 内容模块搜索框写法: <form class="search-form" action="/index.php" method="get"> <input type="hidden" name="s" value="news">

    迅睿CMS2022-07-11
  • 屏蔽 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