表示换行符的首选位置-前端问题

Denoting a preferred place for a line break(表示换行符的首选位置)

本文介绍了表示换行符的首选位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有一个想要显示在一个HTML表格单元格中的文本：

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

并且我希望该行优先在其中一个逗号之后断开。

有没有一种方法可以告诉HTML呈现器在指定的位置尝试换行，并且在尝试在其中一个空格之后换行之前先这样做，而不使用不换行的空格？如果我使用不换行的空格，那么它会无条件地使宽度变大。如果换行算法已尝试先使用逗号换行，但无法使该行适合，则我希望换行符出现在一个空格之后。

我尝试在<span>元素中包装文本片段，但似乎没有任何帮助。

<html> <head> <style type="text/css"> div.box { width: 180px; } table, table td { border: 1px solid; border-collapse: collapse; } </style> </head> <body> <div class="box"> <table> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <td>lorem ipsum</td> <td> <span>Honey Nut Cheerios,</span> <span>Wheat Chex,</span> <span>Grape-Nuts,</span> <span>Rice Krispies,</span> <span>Some random cereal with a very long name,</span> <span>Honey Bunches of Oats,</span> <span>Wheaties,</span> <span>Special K,</span> <span>Froot Loops,</span> <span>Apple Jacks</span> </td> <td>lorem ipsum</td> </tr> </table> </div> </body> </html>

注意：看起来CSS3 text-wrap: avoid行为是我想要的，但我似乎无法使其工作。

推荐答案
使用

span.avoidwrap { display:inline-block; }

并将我要放在一起的文本换行

<span class="avoidwrap"> Text </span>

它将首先包装在首选块中，然后根据需要包装在更小的片段中。

这篇关于表示换行符的首选位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

基础教程推荐