我必須在我的代碼中列印幾個 textarea 元素。這是一個例子：
@media screen {
textarea[division]{
font-size: 13px;
height: 70px;
resize: none;
text-align: center;
}
textarea[top]{
float: right;
width: 150px;
}
}
@media print {
textarea {
margin:0;
padding:0;
border:none;
display:flex;
overflow: hidden;
}
textarea[division]{
overflow: hidden;
border: none;
margin:0;
padding:0;
margin-bottom: 0;
white-space: nowrap;
resize: none;
display:block;
font-size: 13px;
}
button{
visibility: hidden;
}
}<div><p><b><br>Division:</b><textarea id='transfer_out_division' type='text' placeholder="EMD - AFC Program & Information Management" top required division></textarea></p></div>
<button type="button" onclick="window.print();return false;"/>EXPORT PDF</button>我希望將文本列印在與 Division 相同的行上，并在空間不足時將文本推送到下一行。我將如何解決這個問題？
uj5u.com熱心網友回復：
我更正了 HTML 部分，因為有一些<br>標簽，并且它不適用于 CSS 放置。我也添加了這個.container類，以便使用 flex-box。
<p class="container">
<b>Division:</b>
<textarea id='transfer_out_division' type='text'
placeholder="EMD - AFC Program & Information Management" top required division></textarea>
</p>
和 CSS 部分：
@media print {
textarea {
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
textarea[division] {
overflow: hidden;
border: none;
margin: 0;
padding: 0;
margin-bottom: 0;
white-space: nowrap;
resize: none;
font-size: 13px;
}
button {
visibility: hidden;
}
.container {
display: flex;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460477.html
標籤：javascript html css