[jQuery]超出容器部分...

思路:

　　1.获取容器的内部区域高度 eleH

　　2.获取文字的内部区域高度 pEle

　　3.循环判断 pEle 和 eleH的大小

　　　　当 pEle > EleH 的时候，将结尾的文字替换...

代码:

<div class="description"><span>测试</span>
</div>/*****
*@paran:超出部分...
*@ele:容器
*@tag:文字标签
**/
ellipsis(".description","span");
function ellipsis(ele,tag){var ele = $(ele);var eleH = ele.innerHeight();var eTag = ele.children(tag);while(eTag.innerHeight() > eleH) {eTag.text(eTag.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));};
}/****** 多个 ******/$(".description").each(function(){var eleH = $(this).innerHeight();var pEle =$(this).children("span");while(pEle.innerHeight() > eleH) {pEle.text(pEle.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));};})

转载于:https://www.cnblogs.com/SoYang/p/11183393.html

[jQuery]超出容器部分...相关推荐

html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
使用Css隐藏超出容器宽度的文字，溢出部分用“...”表示
哎,今天才知道用Css就可以弄出字数太长时"截取"字数的效果,以前还傻乎乎的在后台,或是用js截取.- -! 代码 1 <html> 2 <head> 3 ...
flex布局中，保持内容不超出容器的解决办法
本文转载链接:https://blog.csdn.net/zgh0711/article/details/78270555 在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起 ...
精确实现popover效果：内容超出容器则tooltips+popover展示，反之无效果
前端中对于:"文字超出tooltip展示,鼠标滑过气泡展示所有内容",这样的需求是很常见的,element-ui也有专门的组件el-popover组件支持类似需求的实现要实现这样 ...
html使元素不被内容撑开,flex布局被子元素撑开，如何保持内容不超出容器
移动端里面,flex 布局很好用,它可以根据设备宽度来自动调整容器的宽度,可是最近在作项目的时候发现一个问题:html 一个li里面设置了flex,flex: 0 0 33.333%,而后想让子元素里 ...
body 没有被撑开_flex布局被子元素撑开如何保持内容不超出容器的方法
移动端里面,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,但是最近在做项目的时候发现一个问题: 一个li里面设置了flex,flex: 0 0 33.333%,然后想让子元素里面的文字 ...
css设置文字不换行，超出容器部分省略
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 首先设置overflow:hidden,超出部分隐藏. 然后设置text ...
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面 ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...

[jQuery]超出容器部分...

[jQuery]超出容器部分...相关推荐

最新文章

热门文章