精华内容
下载资源
问答
我要提问
  • CSS单行溢出省略
    2022-02-09 08:56:33 
    .omit{
    //必须设置宽度
    width:200px;
    //主要代码
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    //必须是块级元素或者行内块级元素
    display:inline-block;
}

    注意事项：元素必须设置宽度，必须是块级元素或者行内块级元素。

    css css3 前端
    更多相关内容

  • 兼容IE和FF的单行溢出文本显示省略号

     2020-12-11 05:11:48
    单行文本的控制，以前是由程序员完成的，实现截字效果。 　今天介绍的方法兼容IE FF，看下面的详细介绍： 　为了更符合实际，用一个div装起要调试的内容,并为这个div定义一个宽度。 　例如： css代码： div{width:...
    收起

  • css-单行文本溢出隐藏,element-ui表格单行溢出隐藏-鼠标经过上浮提示

     2022-02-15 10:58:43
    一,css-单行文本溢出隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...

    一,css-单行文本溢出隐藏

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

</html>

    多上文字显示省略号:注意有兼容性

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
    </div>
</body>

</html>

    二,element-ui表格单行溢出隐藏-鼠标经过上浮提示

    关键是添加属性:
show-overflow-tooltip

    <template>
    <el-table
      :data="tableData"
      style="width: 500px">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
         show-overflow-tooltip
        >
      </el-table-column>
    </el-table>
  </template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄,上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄,上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'

      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄,上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'

      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄,上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'

      }]
    }
  }
}
</script>
    收起
    展开全文
    css javascript

  • 如何优雅解决单行溢出隐藏和多行溢出隐藏

     2020-08-27 17:36:39
    1、单行溢出隐藏： overflow: hidden; text-overflow: ellipsis;//多出部分以省略号形式隐藏 white-space: nowrap;/* 禁止换行 normal可以换行 */ text-overflow: ellipsis; 多出部分以省略号形式隐藏，还可以有...

    1、单行溢出隐藏：

    	overflow: hidden;
    text-overflow: ellipsis;//多出部分以省略号形式隐藏
    white-space: nowrap;/* 禁止换行  normal可以换行 */

    text-overflow: ellipsis;
    多出部分以省略号形式隐藏，还可以有其他形式隐藏，如clip，自定义string，可参考溢出隐藏

    2、多行溢出隐藏：

    display: -webkit-box; 
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:5;/*5代表, 在第5行结尾出现省略号,后面的内容都不显示*/
overflow: hidden;
text-overflow:ellipsis;
    收起
    展开全文
    css

  • flex下 文字单行溢出处理失效的解决方法

     2020-08-15 11:08:44
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试...溢出处理失效图 在wrap下的div 添加 width：0 处理后的图  
    <!DOCTYPE html>

<head>
    <style>
        .content {
            display: flex;
        }

        .wrap {
            display: flex;
            flex: 1;
            flex-direction: row;
        }

        .wrap > div {
            flex:1;
            width: 0;
            border: 1px solid red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="wrap">
            <div>
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </div>
            <div>
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </div>
            <div>
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </div>
        </div>
    </div>
</body>

</html>

    溢出处理失效图

    在wrap下的div 添加 width：0 处理后的图 

    收起
    展开全文

  • 单行溢出与多行溢出

     2016-06-28 15:58:02
    一 单行溢出与多行溢出：  （1）单行溢出   （如上图）这几个属性在我们的开发中一般都是比较常用的，主要配合overflow和 text-overflow , white-space这几个属性来使用，他们的取值分别是hidden , ellipsis , ...
    收起
    文本属性

  • css文字单行溢出和多行溢出隐藏

     2020-12-04 17:32:36
    CSS文字单行溢出和多行溢出隐藏 单行溢出隐藏 // 单行溢出隐藏 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行溢出隐藏 // 多行溢出隐藏 display: -webkit-box; -webkit-box-orient: ...
    收起
    css

  • CSS实现单行、多行文本溢出显示省略号（…）

     2019-07-26 11:37:23
    CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
    收起

  • 文字单行溢出隐藏和多行溢出隐藏的实现方案

     2020-06-12 15:03:36
    1.单行文本 div { width: 200px;... /* 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 */ overflow: hidden; text-overf
    收起
    css

  • 单行溢出隐藏

     2017-11-11 18:20:43
    通过css 的单行溢出隐藏能够解决。隐藏过长的内容。在css添加如下三行： 之后能够达到的效果如下：
    收起

  • 单行文字溢出处理

     2020-09-17 22:22:08
    css简单实现下图单行文本溢出部分用省略号代替效果 当文本内容过多是，默认会自动换行 要变为第一张图的效果，只需要给该行文字所在的标签加三个属性 text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。...
    收起
    html css

  • css 单行溢出 和 多行溢出 字母太长不换行问题

     千次阅读 2019-11-22 18:27:12
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 需要设置一个宽度，不能是行内元素 display: -webkit-box; -webkit-line-clamp: 3; // 多行 -webkit-box-orient: vertical;......
    收起

  • CSS 单行溢出文本显示省略号...的方法（兼容IE FF）

     千次阅读 2017-06-27 13:50:25
    还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。 但在FF中用上面的样式是实现不了的,因为 text-overflow: ...
    收起
    省略号 css

  • 关于文本的换行、溢出(单行溢出、多行溢出)与样式

     2021-02-02 18:30:45
    /* normal（默认，只在内容的断点换行） */ } 可以看到在第二行就发生了折行，其他两个与word-break相比，仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。 word-break还有一个值为 keep-all ...
    收起
    css

  • 当表格遇上单行溢出省略显示

     2019-07-30 02:28:19
    通常，使用单行溢出省略显示，我们都会这样写： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是当需要在table表格中使用时，有没有发现根本不生效？ 文字内容就是要把表格继续...
    收起

  • css中自适应表格连续字符换行以及单行溢出点点点的显示

     2018-06-08 11:11:36
    让连续的英文数字字符换行：word-break：break-all让单行文字超出的时候使用点点点：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;如果是自适应表格的时候，要实现上面的两个效果，可能就会遇到...
    收起

  • 单行文本溢出显示省略号

     2022-03-15 20:47:24
    写页面的时候会经常看见一行文本后面跟了省略号，其实不是文本后面直接写…实现的，而是当文本超出了页面显示的宽度时，自动显示省略号。...注意：这三个属性要配合使用才能实现单行文本溢出隐藏 完整代码： <
    收起
    css3 css html

  • 单行文本溢出隐藏、多行文本溢出隐藏，省略号代替

     2022-03-21 15:03:18
    单行文本溢出隐藏、多行文本溢出隐藏，省略号代替
    收起
    前端 javascript vue.js html html5

  • 自适应表格字符换行 单行溢出省略号table-layout: fixed;

     2021-06-11 14:25:53
    我们应该都知道使用word-break: break-all;...让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点，且点的位置是在中间，见下2行示例代码)。display: -webkit-box; /* heig...
    收起

  • 单行文字溢出隐藏显示省略号

     2022-03-04 14:29:35
    单行文字溢出隐藏显示省略号 1.让换行的文字强制在一行显示。属性white-space: nowrap; 2. 溢出的部分隐藏。overflow: hidden； 3.文字溢出显示用省略号。text-overflow: ellipsis; <!DOCTYPE html>...
    收起
    css

  • css 单行文本溢出显示省略号

     2022-04-01 19:10:13
    css单行文本溢出显示省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    收起
    css

  • 设置单行文本溢出隐藏

     2021-05-01 13:08:36
    设置单行文本溢出隐藏
    收起
    css

  • CSS单行文本溢出显示省略号

     2022-01-22 12:37:21
    如何让单行文本溢出显示省略号呢？ 操作步骤 建立简单的html样式 第一步：限定范围 width:; 第二步：强制文本不换行 white-space:nowrap; 第三步：溢出隐藏 overflow:hidden; 第四步：显示省略号 ...
    收起
    css html

  • css单行文本溢出打点是什么？

     2021-02-11 21:01:42
    /*溢出部分隐藏*/ text-overflow：ellipsis；/*溢出部分用“。。。”代替*/}#tourp{ white-space：nowrap； 扩展资料： css的工作原理 CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息...
    收起

  • 单行溢出和多行文本溢出

     2015-03-05 18:54:54
    [size=large][b]一、单行溢出[/b][/size] 1，固定宽度（非常容易） text-overflow: ellipsis; 2，不固定宽度 思路：想让这个区域成为块元素，然后不换行，溢出隐藏。 display: block; white-space: nowrap: ...
    收起
    css

  • CSS实现单行、多行文本溢出显示省略号的实现方法

     2020-09-22 16:52:24
    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览
    收起

  • CSS实现单行、多行文本溢出显示省略号

     2022-04-06 19:59:54
    CSS实现单行文本溢出显示省略号 white-space: nowrap; // 文本不换行 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出显示省略号 效果： CSS实现多行文本溢出显示省略号 display: -webkit-box...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,470
精华内容 7,388
热门标签
关键字：

单行溢出