单选文本及多行文本溢出问题

1、单行

HTML:

<span class="col_one_text">测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</span>

CSS:

.col_one_text{
display: inline-block;
width: 70px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

2、多行

HTML:

<div id="text_all_outer" class="text-outer">
<a onclick="showAll(this)" class="more">更多</a>
<a onclick="hideAll(this)" class="shouqi">收起</a>
<span class="text_all">
测试数据测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据12<br/>
</span>
</div>

CSS:

.text-outer{
border: 1px solid red;
font-family: "微软雅黑";
font-size: 12px;
display: inline-block;
position:relative;
line-height:16px;/* 3 times the line-height to show 3 lines */
height:48px;
overflow:hidden;
letter-spacing:1px;/*字间距*/
}
.text-outer::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 52px 1px 13px;
background-color: white;
z-index: 1;
}
.addclass{
position:relative;
font-family: "微软雅黑";
line-height:16px;
font-size: 12px;
display: inline-block;
border: 1px solid blue;
}
.addclass::after{
content:"";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 52px 1px 13px;
background-color: white;
z-index: 1;

}
.more,.shouqi{
font-size: 14px;
margin-bottom: 1px;
border-bottom: 1px solid #B89758;
position: absolute;
bottom: 0;
color:#B89758;
z-index: 2;
}
.more{
right: 21px;
}
.shouqi{
right:10px;
}
.shouqi{
display: none;
}
.more:hover,.shouqi:hover{
cursor: pointer;
}

JS:

<script>
//更多
function showAll(obj){
$(obj).hide();
$(obj).next(".shouqi").show();
var text_h = parseInt($(".text_all").css("height"))+16+"px";
$("#text_all_outer").css("height",text_h);
$("#text_all_outer").removeClass("text-outer");
$("#text_all_outer").addClass("addclass");
}
//收起
function hideAll(obj){
$(obj).hide();
$(obj).prev(".more").show();
$("#text_all_outer").css("height","48px");
$("#text_all_outer").removeClass("addclass");
$("#text_all_outer").addClass("text-outer");
}
</script>

时间: 2024-11-06 22:49:28

单选文本及多行文本溢出问题的相关文章

单行文本和多行文本溢出显示省略号

1.单行文本 overflow: hidden; white-space: nowrap; //用于处理元素内的空白,只在一行内显示 text-overflow: ellipsis; //超过宽度使用省略号 2.多行文本 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; //对象作为伸缩盒子模型显示          -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元

单行文本和多行文本溢出以省略号显示方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .inaline{ overflow: hidden; white-space:nowrap;   //单行显示溢出以省略号显示方法 text-overflow: ellip

CSS实现多行文本溢出省略效果和单行文本溢出省略效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <styl

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

1.单行文本溢出需要满足三个条件: overflow:hidden;     white-space:nowrap;  text-overflow:ellipsis; 2.多行文本溢出需要满足下面几个条件: display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-break:break-all; -webkit-box-orient:vertical; //子元素应该被水平或垂直排列 -webkit-line-clam

单行文本溢出显示省略号.多行文本溢出显示省略号

单行文本溢出显示省略号 <!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-Compatib

多行文本溢出省略号显示

1.单行文本溢出 p { overflow : hidden; text-overflow: ellipsis; white-space:nowrap; } 2.多行文本溢出——单纯只用css方法只有用非标准样式且只兼容webkit内核或者opera浏览器 2.1—— -webkit-line-clamp属性 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果. WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用W

单/多行文本溢出显示省略号+清除浮动

1.文本溢出显示省略号 (1)单行文本溢出,只需要给文本所在的容器设置如下样式: width:100px;/*容器一定要设置固定宽度*/ white-space:nowrap;/*强制一行内显示*/ overflow:hidden;/*溢出隐藏*/ text-overflow:ellipsis; /*显示省略号*/ 注意:即使给上面文本所在的容器设置了足够高的高度,也会强制变成单行内显示. (2)多行文本溢出,通过本人亲自试验,总结了以下几种方法: ①只适用于Webkit内核的浏览器,给文本所在

多行文本溢出显示省略号

首先对之前的一篇文章进行一点补充. 之前的那篇叫做“强制span不换行”.当时只是实现了功能,并不知其所以然.最近学习了一点页面制作的知识,对原理有了些许了解.对于单行文本,实现溢出不换行并以省略号表示可以完全通过css实现,代码如下: /*处理文本的空白字符,使其不自动换行*/ white-space: nowrap; /*溢出的部分 隐藏*/ overflow:hidden; /*显示省略符号来代表被修剪的文本*/ text-overflow: ellipsis; 其实只要上面的代码合作,就