动态输入最大宽度
[英]Dynamic input max-width
问题描述
我有这段代码可以动态显示文档“ div”中输入字段的值。 我已经设置了'div'max-width属性，但是它看起来只有在输入字符串中有空格时才起作用，如果'div'中的字符串不可以继续打开……在一排。 我该如何解决？
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 300px;
font-size:40px;
color:red;
font-weight:bold;
background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
$("div").text($("input").val());
});
});
</script>
</head>
<body>
Sample value: <input type="text">
<div></div>
</body>
</html>
5 个解决方案
解决方案1
2 已采纳 2017-05-25 09:25:39
您需要添加word-wrap: break-word; 此属性：
$(document).ready(function(){ $("input").keyup(function(){ $("div").text($("input").val()); }); });
div { max-width: 300px; font-size:40px; color:red; font-weight:bold; background-color:yellow; word-wrap: break-word; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> Sample value: <input type="text"> <div></div>
解决方案2
1 2017-05-25 09:26:39
您可以使用css属性word-wrap:break-word; 在div元素中。 它适用于所有浏览器。
word-break: break-all;
解决方案3
1 2017-05-25 09:26:55
您可以为div设置min-width ， min-height ， word-wrap
解决方案4
1 2017-05-25 09:30:35
看看这个小提琴最大宽度属性
HTML：-
Sample value: <input type="text">
jQuery的：-
$(document).ready(function(){
$("input").keyup(function(){
$("div").text($("input").val());
});
}）;
CSS：
div {
max-width: 300px;
font-size:40px;
color:red;
font-weight:bold;
background-color:yellow;
word-wrap : break-word;
}
解决方案5
1 2017-05-25 09:34:06
如果要在一行中显示该值，则将div的溢出设置为隐藏，如果要在多行中显示该值，则将div的自动换行设置为断行。
word-wrap CSS属性用于指定是否允许浏览器在单词中打断行，以防止在其他情况下坚不可摧的字符串太长而无法容纳时溢出。
溢出属性指定是在其块级容器太大时是剪辑内容，渲染滚动条还是显示溢出内容。
具有动态背景的div的最大高度和最大宽度？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.