表示换行符的首选位置

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>

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

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

本文标题为:表示换行符的首选位置

基础教程推荐