关于Div中内容布局

风中追風 2014-01-23 04:19:09

首先在Div中高度固定宽度自动里面添加文字如图：

如果文字过长就自动扩充宽度达到如下图所示：

希望能给出代码谢谢

...全文

175 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

问苍天人生几何 2014-01-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <style>
        #d1
        {
            height: 100px;
            width: 50px;
            border: 1px solid red;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <input type="text" id="txt" value="" onkeyup="check()" />
    <div id="d1">
    </div>
    <script type="text/javascript">
        function getLength(str) {
            var wordwide = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {//单字节加1
                    wordwide++;
                } else {
                    wordwide += 1;
                }
            }
            return wordwide;
        }

        function check() {
            var strContent = document.getElementById("txt").value;
            document.getElementById("d1").innerHTML = strContent;
            var _oldWidth = document.getElementById("d1").style.width.toString().replace("px", "");
            if (_oldWidth != "")
                _oldWidth = parseInt(_oldWidth);
            else
                _oldWidth = 50;
            var _cnWordCnt = getLength(strContent); //汉字个数
            var _totLength = strContent.length - _cnWordCnt + _cnWordCnt * 2;
            if (_totLength > (34 * (_oldWidth / 50))) {
                document.getElementById("d1").style.width = (_oldWidth + 50).toString() + "px";
            }
        }
    </script>
</body>
</html>

风中追風 2014-01-24

打赏
举报

引用 2 楼 qqTimo 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <style> #d1{ height:300px; border:1px solid red} </style> </head> <body> <input type="text" id="txt" value="啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦"/> <input type="button" onclick="check()" /> <div id=d1></div> <script> function check() { document.getElementById("d1").innerHTML = document.getElementById("txt").value; var str = document.getElementById("d1").innerHTML.toString(); if (str.length > 10) { document.getElementById("d1").style.width = "300px"; } else { document.getElementById("d1").style.width = "50px"; } } </script> </body> </html> 希望对你有帮助

这样还是横向得我要得是先纵向排列纵向拍不下了才是横向得

qqTimo 2014-01-23

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <style> #d1{ height:300px; border:1px solid red} </style> </head> <body> <input type="text" id="txt" value="啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦"/> <input type="button" onclick="check()" /> <div id=d1></div> <script> function check() { document.getElementById("d1").innerHTML = document.getElementById("txt").value; var str = document.getElementById("d1").innerHTML.toString(); if (str.length > 10) { document.getElementById("d1").style.width = "300px"; } else { document.getElementById("d1").style.width = "50px"; } } </script> </body> </html> 希望对你有帮助

风中追風 2014-01-23