方法1.多行控制(css3)

.text {
width: 100%;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
overflow: hidden;
}

line-clamp:几行以后显示省略号(例子为2行)

方法2.单行定宽

.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

应用在block级的元素上

连续字符换行问题

p{
word-break:break-all;
word-wrap:break-word;
}

【CSS】文字超出显示省略号&连续字符换行的更多相关文章

  1. css文字超出显示省略号

    单号: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行: word-break: break-all; text-ove ...

  2. CSS文字过多显示省略号

    CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...

  3. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  4. css内容超出显示省略号

    CSS实现单行.溢出显示省略号(…) 把要设置的显示省略号的标签,加上以下的属性 overflow: hidden; /*超出不显示*/ text-overflow: ellipsis;/* 超出内容 ...

  5. 用户界面样式(cursor,resize,vertical-align,outline,文字超出显示省略号)

    1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添 ...

  6. CSS解决文字超出显示省略号问题

    超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...

  7. table表格中文字超出显示省略号

    第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...

  8. table td 文字超出显示省略号

    .autocut {      width:250px;      overflow:hidden;      white-space:nowrap;      text-overflow:ellip ...

  9. css文字超出变省略号...

    <style>.text1 {    width:200px;    overflow:hidden;    text-overflow:ellipsis;    -o-text-over ...

随机推荐

  1. hdu 1079 Calendar Game sg函数 难度:0

    Calendar Game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. C# ASP.NET 验证码

    使用C# ASP.NET 获取 验证码的代码书写 一般都采用异步 点击 前台验证码图片 请求一次 : 前台图片代码: <img id="imgvalidatecode" sr ...

  3. 深入理解java泛型

    一. 什么是泛型? 泛 型(Generic type 或者 generics)是对 简单的理解,就是对类型的参数化,比如我们定义一个类属性或者实例属性时,往往要指定具体的类型,如Integer.Per ...

  4. Qt出现QObject::connect: Cannot queue arguments of type '******'的解决方法

    一般出现这种情况都是自定义的类型进行型号槽连接的时候出现的,使用 假设自定义的类型是MyClass 使用qRegisterMetaType<MyClass>("MyClass&q ...

  5. Django中构造响应对象的方式

    1 HttpResponse 可以使用django.http.HttpResponse来构造响应对象. HttpResponse(content=响应体, content_type=响应体数据类型, ...

  6. Mimiktaz抓取本机密码

    Mimiktaz2.0以后的版本只需要两条命令即可实现密码的抓取 mimikatz # privilege::debug mimikatz # sekurlsa::logonpasswords

  7. SQL 动态PIVOT查询

    DECLARE @sql_str VARCHAR(8000)DECLARE @sql_col VARCHAR(8000) SELECT @sql_col = ISNULL(@sql_col + ',' ...

  8. 4. 什么是应用服务器? - JavaEE基础系列

    本文是JavaEE基础系列的第四节. Java EE简介 - JavaEE基础系列 JSR简介 - JavaEE基础系列 什么是JSR参考实现? - JavaEE基础系列 上一节介绍了什么是JSR参考 ...

  9. 使用json path设置关联

    与正则表达式相比,这种方法会更简单一些: json path是在返回的是K-V的格式中根据key进行的关联,如果压的接口返回的是json的话,使用json path比较方便,如果不是json的话,就使 ...

  10. vscode+Firefox实现前端移动真机测试

    需要配件: 1.安装有火狐浏览器的移动端(手机); 2.安装有火狐浏览器和vscode的pc(电脑); 3.在vscode安装Live Server 插件 4.安装之后vscode右下角会有Go Li ...