在print.css的输入中换行文本
在print.css的输入中换行文本
提问于 2018-06-21 05:38:23
这是个奇怪的问题。
我正在处理一些print.css，我遇到了这样一种情况:我需要对输入字段进行自动换行，以显示其中的所有文本。
我试过了
width: 100% !important;
word-wrap: break-word;
word-break: break-all;
white-space: normal;上面的所有变体和上面的组合都没有运气。
我的表单看起来像这样。
输入中的全文是“这是一个非常长的名字，它永远不会是”
我是不是漏掉了什么？我不能加长表单的宽度，也不能加长字段。它们已达到最大容量。我也不能缩短“收款人名称”标签。
如有任何帮助，我们不胜感激！
回答 1
Stack Overflow用户
发布于 2018-06-21 08:27:47
我认为只使用CSS是不可能的。
我的第一种方法是使用文本区而不是输入，并禁用换行符。
$('textarea').on( 'input', function(){
$(this).val( $(this).val().replace( /[\r\n\v]+/g, '' ) );
});textarea {
width: 300px; /* Just for the demo */
resize: none;
overflow: hidden;
white-space: nowrap;
}
@media print {
textarea {
border: 0;
padding: 0;
margin: 0;
white-space: normal;
height: 3em; /* 3 rows */
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea>
<!-- For Demonstration Purposes Only -->
<button onclick="javascript:window.print()">Print</button>
如果您仍然希望使用输入，那么我将绑定input事件，将内容克隆到一个隐藏的div，然后用print.css文件显示它。
let $input = $('input'),
$clone = $('#clone');
$clone.text( $input.val() );
$input.on( 'input', function(){
let value = $(this).val();
$clone.text( value );
});.show-on-print {
display: none;
}
@media print {
.hide-on-print {
display: none;
}
.show-on-print {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="hide-on-print" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<div id="clone" class="show-on-print"></div>
<!-- For Demonstration Purposes Only -->
<button onclick="javascript:window.print()">Print</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50957422
复制相关文章
相似问题