动态输入最大宽度
[英]Dynamic input max-width
问题描述
I have this code which dynamically displays value from input field inside the documents 'div'. 
我有这段代码可以动态显示文档“ div”中输入字段的值。 I've set up 'div' max-width property, but it looks like it works only if there is a space inside input string, if there isn't the string inside 'div' can go on and on and on... in one line. 我已经设置了'div'max-width属性，但是它看起来只有在输入字符串中有空格时才起作用，如果'div'中的字符串不可以继续打开……在一排。 How do I fix that? 我该如何解决？
<!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
You need to add word-wrap: break-word; 您需要添加word-wrap: break-word; property for this: 此属性：
$(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
You can use the css property word-wrap:break-word; 您可以使用css属性word-wrap:break-word; in the div element. 在div元素中。 It works for all browsers. 它适用于所有浏览器。
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
Have a look at this fiddle max width property 看看这个小提琴最大宽度属性
HTML :- HTML：-
Sample value: <input type="text">
JQuery :- jQuery的：-
$(document).ready(function(){
$("input").keyup(function(){
$("div").text($("input").val());
});
}); }）;
CSS :- 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
if you wanna display the value in line, just set the overflow of div to hidden, and if you want to display the value in multiple lines, just set the word-wrap of div to break-word. 如果要在一行中显示该值，则将div的溢出设置为隐藏，如果要在多行中显示该值，则将div的自动换行设置为断行。
The word-wrap CSS property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.
The overflow property specifies whether to clip content, render scrollbars, or display overflowing content when it is too large for its block-level container.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.