動態輸入最大寬度

我有這個代碼，它動態顯示文檔'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>

來源

2017-05-25 Pawel

可能的重複https://stackoverflow.com/questions/1147877/how-to-word-wrap-text-in-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>

來源

2017-05-25 09:25:39 vijayP

這很完美。謝謝！ – Pawel

welcome @Pawel ...'：）'！ – vijayP

可以在div元素使用CSS屬性word-wrap:break-word;。它適用於所有瀏覽器。

word-break: break-all;

來源

2017-05-25 09:26:39

可以設置min-width，min-height，word-wrap爲div

來源

2017-05-25 09:26:55

看一看這個小提琴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; 
}

來源

2017-05-25 09:30:35 Lalit

，如果你想顯示的行，就設置div的溢出隱藏的價值，如果你想顯示多行的值，只需設置自動換行的div打破單詞。

單詞包裝CSS屬性用於指定是否允許瀏覽器在單詞內打破行，以防止當其他不可破解的字符串太長而不適合時出現溢出。

overflow屬性指定是否裁剪內容，呈現滾動條或在其塊級別容器過大時顯示滿溢內容。

來源

2017-05-25 09:34:06 razor1895

動態輸入最大寬度

回答

相關問題