方法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. 策略模式-Java实现

    策略模式—Java实现 1. 现实需求 本人现在负责开发和维护考核督办系统,其中一个模块叫编写工作计划.是工作计划就要有时间,我们的各种提醒都做了,但是还是有人把x月的工作计划内容写到y月,真心无语了 ...

  2. Bireme:一个 Greenplum数据仓库的增量同步工具

    https://hashdatainc.github.io/bireme/ Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具.目前支持 MySQL.Postgre ...

  3. 安装Spring报错An error occurred while collecting items to be installed

    原因主要是eclipse和spring版本之间的匹配问题. An error occurred while collecting items to be installed session conte ...

  4. echarts-detail--柱状图

    一:柱形图 1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴:标签(数组) ...

  5. 现代前端技术解析:Web前端技术基础

    ​ 最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...

  6. Deep Learning深入浅出

    作者:Jacky Yang链接:https://www.zhihu.com/question/26006703/answer/129209540来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  7. angular 中不要使用location.href

    location.href = '#/HKorderList?gid='+gid+'&gname='+encodeURIComponent(gname)+'&cPeriod='+$(' ...

  8. rabbitMQ高可用

    镜像模式 镜像模式和普通模式的区别就是,队列的数据都镜像了一份到所有的节点上.这样任何一个节点失效,不会影响整个集群的使用. 在实现上,mirror queue内部有一套选举算法,会选出一个maste ...

  9. stark组件03

    优化代码 1:页面的增删改查url反转的封装到类里:ModelSatrk # 编辑页面的url def get_edit_url(self,obj): edit_url = reverse(" ...

  10. 【剑指offer】输入一颗二叉树的根节点,求二叉树的深度,C++实现

    原创博文,转载请注明出处! # 题目 # 举例        下图二叉树的深度为4,最长路径为1-2-5-7. # 思路(递归)       如果一个树只有一个节点,它的深度为1: 如果根节点只有左子 ...