动态输入最大宽度
问题描述:
我有这个代码,它动态显示文档'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>
答
可以在div元素使用CSS属性word-wrap:break-word;
。它适用于所有浏览器。
word-break: break-all;
答
可以设置min-width
,min-height
,word-wrap
为div
答
看一看这个小提琴max width property
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;
}
答
,如果你想显示的行,就设置div的溢出隐藏的价值,如果你想显示多行的值,只需设置自动换行的div打破单词。
单词包装CSS属性用于指定是否允许浏览器在单词内打破行,以防止当其他不可破解的字符串太长而不适合时出现溢出。
overflow属性指定是否裁剪内容,呈现滚动条或在其块级别容器过大时显示满溢内容。
可能的重复https://*.com/questions/1147877/how-to-word-wrap-text-in-html –