文字溢出问题

最近比较迷茫,不知道做什么,将自己最近碰到的一些问题整理一下。

网上查了许多解决方法,情况略有不同。

1,单行溢出。css可以直接解决,但多数浏览器都可以支持,

  1. word-break:keep-all;/* 不换行 */
  2. white-space:nowrap;/* 不换行 */
  3. overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  4. text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;

   当前标签必须设定宽度

2,多行溢出,限制字符个数溢出

  <div class="zxx_text_overflow">限制我的个数是不可能的</div>

  <style>

  .zxx_text_overflow_6{48%; height:180px;}
  </style>

  

<script>
  $(document).ready(function(){
  //限制字符个数
  $(".zxx_text_overflow_5").each(function(){
  var maxwidth=50;
  if($(this).text().length>maxwidth){
  $(this).text($(this).text().substring(0,maxwidth));
  $(this).html($(this).html()+'...');
  }
  });
  });
</script>

3.高度宽度限制 文字溢出

<style>
.zxx_text_overflow_6{48%; height:180px;}
</style>
<body>
<div style=" max-640px; margin:0 auto; ">
<div class="zxx_text_overflow_6"><p>你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!了啊,天啊!<a href="sss" id="xiangxi" style=" display:none; ">详细</a></p></div>

</div>
<script>
var wordLimit=function(){
$(".zxx_text_overflow_6").each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'height': 'auto',
'overflow': 'visible'
});

//alert (xiangxi);
$(this).after(copyThis);
if(copyThis.height()>$(this).height()){
$(this).text($(this).text().substring(0,$(this).html().length-8));
$(this).html($(this).html()+'...');

copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}

});
}
wordLimit();
document.getElementById("xiangxi").style.display='block';
</script>

    最后省略溢出文字,加一个详细的链接,不过效果不是很好,改用css浮动可以控制详细位置

   以上大多为网上的代码,网上类似资料比较多,本人页不知道谁的是原版,未标注出处请谅解。

  

原文地址:https://www.cnblogs.com/danche/p/4186741.html