在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
多行显示，超出部分隐藏，并在最后一行末尾部分添加省略号下面我的部分代码
&div class="roleList-mask" ng-if="editRoleBtn && role.roleDesc !=null && role.roleDesc != ''"&
&div class="config"&
&h3&角色描述&/h3&
&div class="mask-mlellipsis"&
&span&{{role.roleDesc}}&/span&
.roleList-box .roleList-mask .config h3,.roleList-box .roleList-mask .config span{font-family: "PingFangSC";font-size: 14font-weight: 400;color: #}
.roleList-mask .config h3{margin:22px 0 28px 17}
.roleList-mask .config .mask-mlellipsis{margin:0 19px 4px 17width:112height:60}
.roleList-mask .config .mask-mlellipsis span{line-height: 20display:}
$(".mask-mlellipsis").each(function(i){
var divH = $(this).height();
var $p = $("span", $(this)).eq(0);
while ($p.outerHeight() & divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
目前的问题是：不能实现末尾添加省略号当鼠标移至下面的区域，显示上面的角色描述部分。
已尝试了两种方法，一种是css样式，但这种只能是针对webkit浏览器，另外一种伪类，模拟省略号，但这种也有很严重的缺陷。现在在想通过js来实现。但我写的js还有点问题，求指点
求大神指点下，谢谢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
给楼主提供一个库，这个在GitHub上关注挺多的，之前我也使用过。可以参考一下。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
字符串大于16位截取前16位，否则直接显示。
var cardSecret = 'asdf4qqqqq';
var showCardSecret = cardSecret.length&16?cardSecret.substring(0,16)+'...':cardS
console.log(cardSecret,showCardSecret);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
把$p.outerHeight() & divH改成parseInt($p.outerHeight()) & 60是可以实现的
另外可以用相关的插件来实现，
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以看看这篇文章
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。posts - 42,&
comments - 0,&
trackbacks - 0
此为转载，
项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号
1.直接用css属性设置(只有-webkit内核才有作用)
移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略
2.利用伪类
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略
3.利用绝对定位和(跨浏览器解决方案)看到上例是不是觉得“哇，终于可以跨浏览器使用了”，但你这样想的时候有没有考虑过IE的感受？IE6/7是没有伪类的，还不赶快跪下对IE叫声“大哥”，虽然IE6已经退出市场，但是IE7还是需要兼容的，所以呢，我自己又想到了以下的办法，我这边测试了下感觉还行。
这个方法的原理是：首先在包含文字的元素里，嵌入一个&span&...&/span&，然后包含文字的元素右侧留出...的位置(padding-right),最后利用绝对定位将...定位至右侧的padding-right区域示例
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略...
4.其他利用js插件来实现该功能，这里有俩款插件推荐，这篇主要介绍的是css方法，所以它们使用方法就不废话了。
问题感谢指出了第二种和第三种都没有考虑到内容不足俩行的情况，这种情况下，我的上面说到的第二种和第三种方法，“...”依旧会存在，并不会隐藏。暂时还没有想出利用css来实现不到俩行隐藏的办法，sorry。所以如果存在不到俩行的情况尽量还是不要用了吧，可以使用js。这个就先放在这儿，什么时候想到办法再来修改
function mitulineHide(num,con){
var contain = document.getElementById(con);
console.log(con);
var maxSize =
var txt = contain.innerHTML;
if(txt.length&num){
console.log('1')
txt = txt.substring(0,num-1)+"..."
contain.innerHTML =
console.log("error")
阅读(...) 评论()&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
织梦小常识dede title 标题长度限制（超出显示省略号，不超出则显示全部）
摘要：dedecms限制标题长度加省略号的修改方法大家都知道,有时候,网页文章的标题太长的时候,会影响网页的美观,所以我们要对它进行修剪,限制它只显示多少个文字,多出来的部分用省略号代替.那么如何和在DEDECMS实现这个效果呢?下面列出3种方法给大家参考:1、修改CSS的:&astyle=”width:120text-overflow:white-space:overflow:”href=”xxxxx”&网页文章很长
dedecms限制标题长度加省略号的修改方法
大家都知道,有时候,网页文章的标题太长的时候,会影响网页的美观,所以我们要对它进行修剪,限制它只显示多少个文字,多出来的部分用省略号代替.
那么如何和在DEDECMS实现这个效果呢?下面列出3种方法给大家参考:
1、修改CSS的:
&a style=”width:120 text-overflow: white-space: overflow:” href=”xxxxx”&网页文章很长很长很长很长的标题&/a&
解释:width:120 限定长度,text-overflow:ellipsis :当对象内文本溢出时显示省略标记…,white-space:nowrap:强制文本在一行内显示,overflow:hidden:溢出内容为隐藏。
[c-sharp] view plaincopy
修改CSS的方法简单,不过很遗憾,text-overflow:ellipsis属性在firefox中是没有效果的。
2、修改模板的方法:
用 [field:title function=’ ( strlen(”@me”)&30 ? cn_substr(”@me”,30).”…” : “@me” ) ‘ /]代替了原来的 [field:title /] ,在输出标题时多了一个判断的过程,先判断标题是否大于30字节,如果大于则只输出30字节的长度,并加上省略号。而title=” [field:title /]” 则不受影响,鼠标移上去时显示标题的全部内容。
个人比较喜欢这个方法,只需要修改模版,对系统影响很小。
3、改dedecms程序方法:
增加一个fulltitle标签,让你的title=&&显示完整标题
具体修改如下:
1、打开include目录下inc目录下的inc_fun_SpGetArcList.php文件
2、找到228行
$row['title'] = cn_substr($row['title'],$titlelen);
在前面增加一行
$row['fulltitle'] = $row['title']; //注释:显示完整标题
$row['textlink'] = &&a href='&.$row['filename'].&'&&.$row['title'].&&/a&&;
将其替换为:
$row['textlink'] = &&a href='&.$row['filename'].&' title='&.$row['fulltitle'].&'&&.$row['title'].&&/a&&;
个人不喜欢,以为要修改后台程序,比较高级,但是个人对于一个简单的显示问题动后台逻辑有点小题大作,不过可以通过这个来怎加我们对于dede的字符串处理更加深刻的理解。
到可视教程网查看更多http://www.kesjc.com/
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
织梦小常识dede title 标题长度限制（超出显示省略号，不超出则显示全部）相关信息，包括
的信息，所有织梦小常识dede title 标题长度限制（超出显示省略号，不超出则显示全部）相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International当前位置：
谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果
猜你喜欢的文章
谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果
来源：网络整理&&&&&时间: 2:39:22&&&&&关键词:
关于网友提出的“ 谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果
”问题疑问，本网通过在网上对“ 谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题： 谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果
描述:我的控制台打印结果（console.log）都是这样显示省略号，需要点击一下省略号才能显示省略号里面的内容：怎样让它直接展示所有内容呢？解决方案1:console.dir解决方案2:console.log(JSON.stringify([{a:'1'}]))
以上介绍了“ 谷歌浏览器调试时consolelog打印出来的对象内容都是省略版，如何能直接展示结果”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/4447771.html
上一篇： 下一篇：文本溢出-单行文本超出显示为省略号
cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv
Pen Settings
HTML Preprocessor
About HTML Preprocessors
HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
Add Class(es) to &html>
Adding Classes
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . So you don't have access to higher-up elements like the &html> tag. If you want to add classes there, that can effect the whole document, this is the place to do it.
Stuff for &head>
About the &head>
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . If you need things in the &head> of the document, put that code here.
CSS Preprocessor
About CSS Preprocessors
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
About CSS Base
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices:
and a . Or, choose Neither and nothing will be applied.
Vendor Prefixing
About Vendor Prefixing
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.
We offer two popular choices:
(which processes your CSS server-side) and
(which applies prefixes via a script, client-side).
Autoprefixer
Prefixfree
Add External Stylesheets/Pens
Any URL's added here will be added as &link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.
About External Resources
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
Bootstrap 4
Bootstrap 3
Foundation
Animate.css
Materialize
+ add another resource
JavaScript Preprocessor
About JavaScript Preprocessors
JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
CoffeeScript
LiveScript
TypeScript
Add script as a module
About ES6 Modules
Modules are a feature that allow your browsers JavaScript to use import statements to import functions, objects or primitives.
Add type="module" on the Pen's &script& tag
Add External Scripts/Pens
Any URL's added here will be added as &script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
About External Resources
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
Bootstrap 3
Bootstrap 4
Foundation
GreenSock TweenMax
Handlebars
Polyfill.io
Underscore
+ add another resource
Code Indentation
Width of Indent
Save Automatically?
If active, Pens will autosave every 30 seconds after being saved once.
Auto-Updating Preview
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
Local Revisions
Your browser has a more recent version of this Pen stored. Click the timestamp and save your Pen to save the new version.
HTML Options
&div class=&text-overflow&&HTML5学堂：本文当中我们主要为大家讲解如何实现文本超出显示为省略号；同时讲解一下，在网页开发与制作的时候，我们什么时候应该考虑内容撑开宽高，又应该在何时考虑文本超出的问题。&/div&
CSS Options
.text-overflow {
width: 400
height: 40
line-height: 20
/*如下为超出隐藏显示为省略号的核心代码*/
/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:一起使用。*/
word-break: keep-
/* 不换行 */
white-space:
/* 不换行 */
JS Options
..................
Editor Commands
Autocomplete (if available)
Find Previous
Find & Replace
Indent Code Right
Indent Code Left
Auto Indent Code
Line Comment
Block Comment
HTML Specific
Wrap With...
Re-run Preview
Clear All Analyze Errors
Open This Dialog
Pen Actions
Create New Pen
Info Panel (if owned)
CodePen requires JavaScript to render the code and preview areas in this view.
Trying , which is the preview area without any iframe and does not require JavaScript. Although what the preview is of might!
Need to know how to enable JavaScript?
Close this, use anyway.