2017-05-25 48 views
0

我有这个代码,它动态显示文档'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> 
+0

可能的重复https://stackoverflow.com/questions/1147877/how-to-word-wrap-text-in-html –

回答

2

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

+0

这很完美。谢谢! – Pawel

+0

welcome @Pawel ...':)'! – vijayP

1

可以在div元素使用CSS属性word-wrap:break-word;。它适用于所有浏览器。

word-break: break-all; 
1

可以设置min-widthmin-heightword-wrapdiv

1

看一看这个小提琴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; 
} 
1

,如果你想显示的行,就设置div的溢出隐藏的价值,如果你想显示多行的值,只需设置自动换行的div打破单词。

单词包装CSS属性用于指定是否允许浏览器在单词内打破行,以防止当其他不可破解的字符串太长而不适合时出现溢出。

overflow属性指定是否裁剪内容,呈现滚动条或在其块级别容器过大时显示满溢内容。