Javascript 动态输入最大宽度_Javascript_Jquery_Css

Javascript 动态输入最大宽度

javascript jquery css

Javascript 动态输入最大宽度,javascript,jquery,css,Javascript,Jquery,Css,我有一段代码，它动态地显示文档“div”中输入字段的值。我已经设置了'div'max width属性，但它看起来只有在输入字符串中有空格的情况下才有效，如果'div'中没有空格的话，它可以继续运行下去。。。排成一行。我该如何解决这个问题 <!DOCTYPE html> <html> <head> <style> div { max-width: 300px; font-size:40px; color:red; font-weight:bold

我有一段代码，它动态地显示文档“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>


div{
最大宽度：300px；
字体大小：40px；
颜色：红色；
字体大小：粗体；
背景颜色：黄色；
}
$（文档）.ready（函数（）{
$（“输入”）.keyup（函数（）{
$（“div”）.text（$（“input”）.val（））；
});
});
样本值：

您需要添加

wordwrap:break-word此的属性：

$（文档）.ready（函数（）{
$（“输入”）.keyup（函数（）{
$（“div”）.text（$（“input”）.val（））；
});
});
div{
最大宽度：300px；
字体大小：40px；
颜色：红色；
字体大小：粗体；
背景颜色：黄色；
单词包装：打断单词；
}

样本值：
您需要添加wordwrap:break-word此的属性：

$（文档）.ready（函数（）{
$（“输入”）.keyup（函数（）{
$（“div”）.text（$（“input”）.val（））；
});
});
div{
最大宽度：300px；
字体大小：40px；
颜色：红色；
字体大小：粗体；
背景颜色：黄色；
单词包装：打断单词；
}

样本值：
您可以使用css属性word wrap:break word。它适用于所有浏览器
word-break: break-all;

您可以使用css属性wordwrap:break-word。它适用于所有浏览器
word-break: break-all;

您可以为div
，min height
，wordwrap
设置min width
，min height
，wordwrap
设置div
的min height
，您可以为div
设置min width
，的wordwrap
，看看这把小提琴
HTML:-
Sample value: <input type="text">

}))
CSS:-
    div {
max-width: 300px;
font-size:40px;
color:red;
font-weight:bold;
background-color:yellow;
word-wrap : break-word;
}

看看这把小提琴
HTML:-
Sample value: <input type="text">

}))
CSS:-
    div {
max-width: 300px;
font-size:40px;
color:red;
font-weight:bold;
background-color:yellow;
word-wrap : break-word;
}

如果要在第行中显示值，只需将div的溢出设置为hidden，如果要在多行中显示值，只需将div的换行设置为break word
word wrap CSS属性用于指定是否允许浏览器打断单词中的行，以防止在无法拆分的字符串过长时溢出
溢出属性指定当溢出内容对于其块级容器太大时，是剪切内容、渲染滚动条还是显示溢出内容
如果要在第行中显示值，只需将div的溢出设置为hidden，如果要在多行中显示值，只需将div的换行设置为break word
word wrap CSS属性用于指定是否允许浏览器打断单词中的行，以防止在无法拆分的字符串过长时溢出
溢出属性指定当溢出内容对于其块级容器太大时，是剪切内容、渲染滚动条还是显示溢出内容
可能的重复可能的重复那太完美了。非常感谢。太好了。非常感谢。