在发送邮件的jenkins工程中,邮件内容中有一段版本说明是用户输入的文本,为了支持多行描述,用的是jenkins的文体参数,但是调试时发现输入的多行文本在邮件中被显示成了一行。
如下为最后一行的html模板
<tr height="21">
<td align="left" class="xl67" height="42" rowspan="2" valign="middle" width="156" style="padding-top:1.0px;padding-right:1.0px;padding-left:1.0px;color:#ff0000;font-size:16.0px;font-weight:400;font-style:normal;text-decoration:none solid #ff0000;font-family:等线;border:1.0px solid #666666;">版本更新说明</td>
<td align="left" class="xl68" colspan="5" rowspan="2" valign="middle" width="591" style="padding-top:1.0px;padding-right:1.0px;padding-left:1.0px;color:#000000;font-size:16.0px;font-weight:400;font-style:normal;text-decoration:none solid #000000;font-family:等线;border:1.0px solid #666666;">${description}</td>
</tr>
如何才能够使文本内容自动换行呢?
首先想到的是将文本中的/r/n替换为<br>,可以先用shell脚本替换好,或者应用js语法在页面加载时替换,这些都需要费此功夫,所以有没有更好的办法呢?
网上搜了一下,果真有更简单的方法,即应用CSS white-space 属性,将style="white-space:pre-wrap;"即可。
<td align="left" class="xl68" colspan="5" rowspan="2" valign="middle" width="591" style="padding-top:1.0px;padding-right:1.0px;padding-left:1.0px;color:#000000;font-size:16.0px;font-weight:400;font-style:normal;text-decoration:none solid #000000;font-family:等线;border:1.0px solid #666666;white-space:pre-wrap;">${description}</td>
没想到有些看起来比较头疼的问题,解决起来竟然这么简单。
更多的white-space属性值及含义参考如下:
CSS white-space 属性
值 | 描述 |
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
参考:
https://cloud.tencent.com/developer/ask/167646
https://blog.csdn.net/weixin_34015336/article/details/92377186