html中文字溢出处理(text-overflow)
文字溢出处理有两种方式:
一、css
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
二、js方法
控制字符个数,超出部分这不显示
以下为示例demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text test</title>
<style>
.wrapper{
display:flex;
flex-direction: row;
justify-content: space-between;
width: 1000px;
height:300px;
margin:100px auto;
}
.wrapper p{
width: 300px;
height:auto;
padding:20px;
border:1px solid #ddd;
box-sizing: border-box;
}
.wrapper p:nth-child(1){
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wrapper p:nth-child(2){
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2; /* 限制在一个块元素显示的文本的行数。*/
}
</style>
</head>
<body>
<div class="wrapper">
<p>青春易逝,容颜易老,即使是平常光鲜亮丽的明星也会有容颜老去的一天,但明星们可不愿意承认自己已经老了事实,即使是已经奔三奔四的年龄了,还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>
<p>青春易逝,容颜易老,即使是平常光鲜亮丽的明星也会有容颜老去的一天,但明星们可不愿意承认自己已经老了事实,即使是已经奔三奔四的年龄了,还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>
<p id="textover">青春易逝,容颜易老,即使是平常光鲜亮丽的明星也会有容颜老去的一天,但明星们可不愿意承认自己已经老了事实,即使是已经奔三奔四的年龄了,还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>
</div> <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var textLgth = 20;
var textCur = $("#textover").text().length;
if(textCur > textLgth){
$("#textover").text($("#textover").text().substring(0,textLgth));
$("#textover").html($("#textover").html()+'...')
}
}); </script>
</body>
</html>
最后页面展示
html中文字溢出处理(text-overflow)的更多相关文章
- table不让td中文字溢出操作方法
table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } t ...
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- box布局中文字溢出问题
如果不设置-webkit-box-flex:1:会溢出,设置width也行,在电脑上模拟可能会有问题,手机上没问题
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- td文字溢出显示省略号
昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflo ...
- table 中 文字长度大于td宽度,导致文字换行 解决方案
1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...
- CSS 文字溢出时的自动隐藏
http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...
- html 文字溢出标签
overflow:visible;作用:能看到溢出部分. overflow: hidden;作用:溢出部分看不到 overflow:scroll; 作用:出现一个滚动条(不超过的文字也会在滚动条里) ...
- JS实现中英文混合文字溢出友好截取功能
在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 ...
随机推荐
- 创建maven版的java工程
步骤如下: 1.第一步 2.第二步: 3.第三步:
- indexes和indices的区别
indexes和indices的区别是: indexes在美国.加拿大等国的英语里比较常见.但indices盛行于除北美国家以外的英语里. indices一般在数学,金融和相关领域使用,而indexe ...
- jvm编译环境搭建 win Vc篇
/************************************************************** 技术博客 http://www.cnblogs.com/itdef/ ...
- HBase的FlushLargeStoresPolicy多例族支持
众所周知,HBase的一个例族flush时,会导致所有例族都跟着被flush.在HBase-0.94的官方说明(http://hbase.apache.org/0.94/book/number.of. ...
- C# HttpClient 请求转发
最近在做一个项目,需要用到别人的接口,但是遇到一个问题,这个接口只能在服务器上访问,不支持外网访问,这让人有点头疼,本地开发没有对应的环境,不好调试,写好代码封装好发布到服务器,在进行前期测试太麻烦了 ...
- [转]分布式中使用Redis实现Session共享(二)
本文转自:http://www.cnblogs.com/yanweidie/p/4678095.html 上一篇介绍了一些redis的安装及使用步骤,本篇开始将介绍redis的实际应用场景,先从最常见 ...
- polymer技巧
1.添加一个div元素 我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" <script> var Poly ...
- Android-开关机的广播
在上一篇博客Android-sdcard广播的接收处理,中介绍了,如何订阅接收者,去接收系统发送的Sdcard状态改变广播,而这篇博客是订阅接收者,去接收开机/关机的广播 Android操作系统在开机 ...
- ASP.NET Core2实现静默获取微信公众号的用户OpenId
最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂 ...
- [C#]DES再一例(转)
public class Encrypt { internal string ToEncrypt(string encryptKey, string str) { try { byte[] P_byt ...