61,112
社区成员
发帖
与我相关
我的任务
分享html超出部分省略号的解决方案
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
...全文
请发表友善的回复…
发表回复
szuzsq 2018-07-09
- 打赏
- 举报
我记得是要设置width和height的.
.ellipsis { /*单行;显示后面的省略号(...)*/
/*width: 100%;*/
height: 1.5em;
line-height: 1.5em; /*以上可能要微调*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ellipsis_multi { /*多行;显示后面的省略号(...)*/
/*width: 100%;*/
height: 3em;
line-height: 1.5em;
-webkit-line-clamp: 2; /*以上可能要微调*/
display: -webkit-box;
word-break: break-all;
word-wrap: break-word;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
LittleMan_LC 2018-05-02
- 打赏
- 举报
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
假使空樽饮月 2018-05-02
- 打赏
- 举报
.ellipsis {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ellipsis_2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
极客诗人 2018-04-26
- 打赏
- 举报
我自是年少-韶华倾负 2018-04-26
- 打赏
- 举报
display:block;/*定义为块级*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
但是 连续的 英文字母 跟连续的 数字 除外如果是这种 用 JS 自动截取字符添加 省略号
yaotomo 2018-04-24
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width:device-width,initial-scale:1.0,user-scalable=no">
<title>Document</title>
<style type="text/css">
/*单行文本溢出*/
.inaline{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行文本溢出*/
.inmultiline{
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div style="width:200px;" class="inaline">This is some long text that will not fit in the box</div>
<br>
<div style="width:300px;" class="inmultiline">
GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside millions of other developers
</div>
</body>
</html>
洋葱泡泡 2018-04-19
- 打赏
- 举报
table{ table-layout:fixed; width:100%;}
table td{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
fioudong 2017-11-18
- 打赏
- 举报
没 问题吧。。。
前端-珊珊 2017-11-18
- 打赏
- 举报
如果没有看错的话，楼主是用了多少行之后自动换行对吧？你这样写是对的啊？有什么问题吗？
当作看不见 2017-11-14
- 打赏
- 举报
white-space: nowrap; 加上这个.
当作看不见 2017-11-14
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding:0;margin:0;}
#nn{
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
overflow: hidden;
}
</style>
<body>
<div id="nn">1234567891011121314151617181920456789101112131415161718192456789101112131415161718192</div>
</body>
</html>
