ホームページ >ウェブフロントエンド >htmlチュートリアル >Div_html/css_WEB-ITnose のコンテンツ レイアウトについて
Div_html/css_WEB-ITnose のコンテンツ レイアウトについて
- WBOYオリジナル
- 2016-06-24 12:26:26940ブラウズ
首先在Div中高度固定 宽度自动 里面添加文字 如图：
如果文字过长就自动扩充宽度达到如下图所示：
希望能给出代码 谢谢
回复讨论(解决方案)
在线等 求助 本人刚毕业菜鸟 弄JAVA 对前台不是很熟悉
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#d1{ height:300px; border:1px solid red}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
76c29093d3d8c8e8533d77314e87566c a9cf2cc0559e50bff6b75f699beccbe4
d8c74e1ab8bc3a50b6faee4add4105be16b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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";
}
}
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
希望对你有帮助
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#d1{ height:300px; border:1px solid red}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
76c29093d3d8c8e8533d77314e87566c a9cf2cc0559e50bff6b75f699beccbe4
d8c74e1ab8bc3a50b6faee4add4105be16b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
document.getElementById("d1").innerHTML = document.getElementById("txt").value;
var str = document. .toString();
else {
document.getElementById("d1").style .width = "50px"
はい、そうしなければなりませんまずは縦に並べてください 縦向きのポートレートが撮れない場合は、風景ポートレート
<!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>