关于Div中内容布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:26:26
Original
905 Leute haben es durchsucht

首先在Div中高度固定 宽度自动 里面添加文字  如图:
如果文字过长就自动扩充宽度达到如下图所示:
希望能给出代码 谢谢


回复讨论(解决方案)

在线等 求助 本人刚毕业菜鸟 弄JAVA  对前台不是很熟悉

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



首页




 


 <script> <br /> function check() { <br /> document.getElementById("d1").innerHTML = document.getElementById("txt").value; <br /> var str = document.getElementById("d1").innerHTML.toString(); <br /> if (str.length > 10) { <br /> document.getElementById("d1").style.width = "300px"; <br /> } <br /> else { <br /> document.getElementById("d1").style.width = "50px"; <br /> } <br /> } <br /> </script>
 


 
 
 
 
 
 
 
 
希望对你有帮助

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



首页




 


 <script> <br /> function check() { <br /> document.getElementById("d1").innerHTML = document.getElementById("txt").value; <br /> var str = document.getElementById("d1").innerHTML.toString(); <br /> if (str.length > 10) { <br /> document.getElementById("d1").style.width = "300px"; <br /> } <br /> else { <br /> document.getElementById("d1").style.width = "50px"; <br /> } <br /> } <br /> </script>
 


 
 
希望对你有帮助
这样还是横向得  我要得是先纵向排列  纵向拍不下了 才是横向得

<!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>
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!