关于Div中内容布局_html/css_WEB-ITnose
首先在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>
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
网页批注如何实现Y轴位置的自适应布局？
Apr 04, 2025 pm 11:30 PM
网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能，特别是如何处理批注之间的间�...
Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？
Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...
如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？
Apr 05, 2025 am 06:15 AM
实现图片点击后周围图片散开并放大效果许多网页设计中，需要实现一种交互效果：点击某张图片，使其周围的...
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
