gpt4 book ai didi

javascript - 动态输入最大宽度

转载 作者:太空宇宙 更新时间:2023-11-03 20:07:16 24 4
gpt4 key购买 nike

我有这段代码可以动态显示文档“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>

最佳答案

为此您需要添加 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>

关于javascript - 动态输入最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44176775/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com