为了账号安全,请及时绑定邮箱和手机立即绑定

网页中DIV文字超出部分自动换行

网页中DIV文字超出部分自动换行

<div class="pin">        <div class="box">            <img src="img/20131104002408_y8jCh.thumb.224_0.jpg"/>            <div style="word-break: break-all;word-wrap: break-word;">ndnvdn53555555555<br/>555555555555555555555555555555555vdoivodhvjoi</div>            <p>ndnvdnvdoivodhvjoi</p>            <p>ndnvdnvdoivodhvjoi</p>            <p>ndnvdnvdoivodhvjoi</p>            <p>ndnvdnvdoivodhvjoi</p>        </div>    </div> .pin{        padding: 15px 0 0 15px;        float:left;    }    .box{        padding: 10px;        border:1px solid #ccc;        box-shadow: 0 0 6px #ccc;        border-radius: 5px;            }    .box img{        width:210px;        height:auto;        word-break: break-all;        display:block;        word-wrap: break-word;        background-color:#0F0;    }jQuery代码如下:// JavaScript Document$( window ).on( "load", function(){    waterfall('main','pin');    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};    window.onscroll=function(){        if(checkscrollside()){            $.each( dataInt.data, function( index, value ){                var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );                var $oBox = $('<div>').addClass('box').appendTo( $oPin );                $('<img>').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);            });            waterfall();        };    }});/*    parend 父级id    pin 元素id*/function waterfall(parent,pin){    var $aPin = $( "#main>div" );    var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽    var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】    //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式:定宽+自动水平外边距    $( "#main" ).css({        'width:' : iPinW * num,        'margin': '0 auto'    });    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。    $aPin.each( function( index, value ){        var pinH = $aPin.eq( index ).height();        if( index < num ){            pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr        }else{            var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH            var minHIndex = $.inArray( minH, pinHArr );            $( value ).css({                'position': 'absolute',                'top': minH + 15,                'left': $aPin.eq( minHIndex ).position().left            });            //数组 最小高元素的高 + 添加上的aPin[i]块框高            pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高        }    });}function checkscrollside(){    var $aPin = $( "#main>div" );    var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)    var scrollTop = $( window ).scrollTop()//注意解决兼容性    var documentH = $( document ).width();//页面高度    return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true,触发waterfall()函数}敬请各位老师帮忙解答
查看完整描述

3 回答

?
qq_hellohellola_03814043

TA贡献30条经验 获得超21个赞

换行的操作元素是一个单词,在这种情况下: 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222, 这种开头便是一个长长的单词,所以不会换行,其他情况下,不知道了。
查看完整回答
1 反对 回复 2016-12-06
?
我的520天

TA贡献4条经验 获得超1个赞

<div style=" word-wrap:break-word;">

查看完整回答
1 反对 回复 2016-12-02
  • 3 回答
  • 0 关注
  • 2459 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信