为什么断字在印刷媒体查询中不起作用？答案

【问题标题】：why word-break not working in print - media query?为什么断字在印刷媒体查询中不起作用？
【发布时间】：2022-01-28 22:31:20
【问题描述】：

我保留了一个 Javascript 函数 printthis() 用于打印目的，它打印 div id printthis 中的所有内容，除了类 d-print-none 给出的内容。该代码在开始页面（打印前的页面）中运行良好。但是在单击打印时，为 div 类 address2 提供的断词不起作用。我希望分词对地址块有好处，就像它在打印之前出现在页面中一样。我该如何解决这个问题？我可以寻求帮助吗？

https://jsfiddle.net/vwsmf50e/3/

完整的脚本和 css 可以在上面的链接中找到。

<div id="printthis">
            <div class="container-fluid">
                <div id="ui-view" data-select2-id="ui-view">
                   <div class="card">
                      <style>
                           @media print {
                            .address {
                                float: right;
                                word-wrap: break-word;
                            }

                            .address2 {
                              float: left;
                               word-wrap: break-word;
                            }
                           }
                       </style>
    
                          <div class="card-header">
                            <a class="float-right mr-1 d-print-none" href="#" onclick="printthis()" data-abc="true"><i class="fa fa-print fa-fw" title="Print Invoice"></i></a>
                          </div> 
                       </div>
                       <div class="card-body">
                           <div class="row mb-4">
                              <div class="col-sm-8 address2" style="margin-bottom: 0rem!important;">
                                  <div><img width='40px' height='40px' src=''> <strong>yyy</strong>      
                                         <div>  kbjk</div>
                                         <div>Email: ui</div>
                                         <div>Phone: 45546</div>
                                 </div>
                               </div>
                               <div class="col-sm-4 ml-auto address">
                                 <div><h6></h6></div>
                                      <div><strong>xfgfggggggggg</strong></div>
                                      <div>tttttttttt</div>
                                      <div>lllllllll</div>
                                      <div>Email: ac@r.com</div>
                                      <div>Phone: 222222</div>
                                </div>
                             </div>
                   </div>
                    </div>
                </div>
            </div>

【问题讨论】：

标签： javascript html css position media-queries

【解决方案1】：

因为您没有为该特定 div 定义任何宽度和高度。我在那里将其定义为“卡片”，请注意。因为它没有限制，因为分词不起作用。用一些这样的样式：

<div class="card-body">
    <div class="row mb-4">
         <div class="col-sm-4 address2" style="margin-bottom: 0rem!important;">

       <img width='40px' height='40px' src=''> <strong>yyy</strong>
       <div **class="card"**>  kbjkhhjhjkjkhjkl ttttttttttttttt mmm,hjhjhjhjhjhjhjhhhhjhhhjhj, 680123 
                                            
       </div>
       <div>Email: ui</div>
       <div>Phone: 45546</div>
 </div>
 <div class="col-sm-4 ml-auto address">

【讨论】：