在输入中包装用于print.css的文本

Question

一个奇怪的问题。

我正在处理一些print.css，遇到一种情况，我需要自动换行输入字段以显示其中的所有文本。

我尝试过

width: 100% !important;
word-wrap: break-word;
word-break: break-all;
white-space: normal;

上述的所有变化形式以及上述的组合，没有运气。

我的表单如下。

输入中的全文为 “这是一个永远不会出现的很长的屁股名称”

我缺少什么吗？我不能延长表格的宽度，也不能延长字段的宽度。他们处于最大容量。我也不能缩短“收款人姓名”标签。

感谢您的帮助！

Answer 1

我认为仅使用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>