表示换行的首选位置

2023-12-07

假设我想在 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 渲染器尝试在某个指定位置中断,并在尝试在其中一个空格之后中断之前先执行此操作,without使用不间断空格?如果我使用不间断空格,那么它会无条件地使宽度变大。我want如果换行算法首先尝试使用逗号并且无法使行适合,则换行发生在其中一个空格之后。

我尝试将文本片段包装在<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行为是我想要的,但我似乎无法让它发挥作用。


By using

span.avoidwrap { display:inline-block; }

并将我想要保存在一起的文本包装在一起

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

表示换行的首选位置 的相关文章

  • 如何设置 jQuery 可拖动的最小/最大左和最小/最大右

    我复制了一份JSbin来练习 JSbin链接在这里 https jsbin com gififikisa edit html css js output 实际站点链接在这里 http 79 170 40 181 emory com Proj
  • 使用 Sandcastles 将图像嵌入 CHM 帮助文件

    我正在使用 Sandcastles 为我的项目生成 CHM 帮助文件 我想要一个可以分发的独立 CHM 文件 最好是单独分发 我遇到的问题是嵌入图像appears该图像需要与 CHM 文件分开存在于用户系统上 当我查看 CHM 文件的来源时
  • 使用 HTML5 FileSystem API 将文件写入桌面

    我正在玩一下文件系统API http www html5rocks com en tutorials file filesystem 我发现了很多生成下载链接并让用户以 浏览器方式 下载文件的示例 我想知道两件事 有没有办法将fiddle中
  • CSS过渡div晃动

    为什么当我使用位置绝对和百分比宽度时 当我将鼠标悬停在上面的 div 上时会出现此故障 有例子 我在更复杂的网站上遇到了这个故障 div class box text div div class container div box widt
  • 强制 Flexbox 在特定项目之后换行(方向:列)

    我有导航 各个条目通过 Flexbox 一层一层地显示 方向 列 如果导航条目获得 分隔符 类 则导航应进入下一行 是否可以强制 Flexbox 执行 换行 nav display flex flex direction column na
  • MVC 5 Razor 活动导航选项卡

    我一直在尝试突出显示我的项目中的活动导航选项卡 我的任务是更新旧网站而不更改为引导程序 这是我的经验所在 我找到了一个包含我需要的大部分内容的示例 目前 唯一具有 选定类别 的选项卡是 主页 选项卡 当我单击另一个选项卡时 主页 选项卡不再
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • contenteditable 在 safari 中不起作用,但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena
  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • 将一个 div 放置在另一个 div 的底部

    我有外部 div 和内部 div 我需要将内部 div 放在外部 div 的底部 外层div是有弹性的 例如宽度 70 我还需要将内部块居中 所述化妆的简单模型如下图所示 已在 Firefox 3 Chrome 1 和 IE 6 7 和 8
  • IE8 底部:0 在位置:绝对的行为类似于位置:固定

    我有一个 DIV 必须始终位于页面的底部 左侧 类似于页脚菜单 div bottom menu position absolute z index 1 left 0 bottom 0 width 90 我的页面定义了最小高度 当用户将其缩小
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • 在 HTML5 画布上创建颜色选择器

    如何在 HTML5 画布上绘制颜色选择器 一个基本的例子是使用getImageData http jsfiddle net eGjak 60 http jsfiddle net eGjak 60 var ctx cv get 0 getCo
  • jQuery 显示/隐藏兄弟姐妹

    我有这段代码 旨在首先隐藏除第一个元素之外的所有相关元素 这个 做的不错啊接下来 它应该根据选择的项目显示 隐藏这些元素 但这部分不起作用 想法 jQuery accordion dl not first child hide hide a
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • ☺ 不在移动版本中呈现

    我如何获得特殊角色 笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐

  • Groupby 和 Pivot Pandas 表

    这应该很快 但是我正在做的枢轴 分组工作都没有达到我的需要 我有一个这样的表 Letter Period Amount YrMnth 2014 12 B 6 0 2014 12 C 8 1 2014 12 C 9 2 2014 12 C 1
  • 不显示背景图像的元素

    我正在尝试为 a 元素添加背景图像 但它只会显示图像的一部分 因此 如果我将 Home 作为值 则无论 home 占用的空间是什么 这就是图像的显示内容 如果该值是空它不会显示图像的任何内容 尽管我已经设置了要显示的 a 元素的宽度和高度
  • 解释 HTTP/1.1 标头字段值时使用什么编码

    在 HTTP 1 1 规范中 当涉及到定义标头时 我得到了这个 消息头 字段名称 字段值 字段值 字段内容 LWS field contet OCTET 和 TEXT 的定义是 OCTET TEXT 其中 CTL 指的是 US ASCII
  • 如何在delphi 7中释放字符串列表中的对象?

    下面是 Zarko Gajic 在 Delphi 的 TStrings 项目中释放对象的想法 在关于德尔福我使用的是 Delphi 7 TStringList 没有 OwnsObjects 运行以下代码会提示EaccessViolation
  • 向 .gitignore 添加新条目不起作用

    如果我理解正确的话 为了 忽略 一个文件 这样当我输入时它就不会出现git status or git add A我需要将其添加到 gitignore 文件中 我的目标是在向 Git 提交更改时永久忽略某个文件夹和文件 我尝试在编辑器中编辑
  • MongoDb / C# 过滤并获取所有子文档

    我在查询 Mongodb 集合时遇到困难 我正在使用的文档 public class Customer public ObjectId Id get set public int CustomerId get set public List
  • 如何在 datagridview 列中显示总和?

    我需要显示的总和count专栏从这里datagridview 但我不知道如何获取 datagridview 中的数据 当我点击按钮时 我想显示94 in label1 如何才能做到这一点 int sum 0 for int i 0 i lt
  • Ionic 取消硬后退按钮覆盖

    关于在 Ionic 中覆盖物理 Android BACK 按钮以提供自定义行为存在一些问题 Ionic 覆盖特定控制器的所有 后退 按钮行为 Ionic 如何覆盖后退按钮功能 但你如何取消覆盖恢复默认行为 我尝试更改处理程序的优先级 希望默
  • C3.js 从 CSV 中排除列

    我正在使用 C3 JS 通过从提供的 CSV 文件加载数据来创建多系列折线图 我可以绘制图表 但是我还没有发现是否可以仅绘制 CSV 中的某些列 我的图表正在绘制所有 CSV 列 我的 CSV 看起来像这样 Sex Age L M S P3
  • 使用 OpenDaylight 入门原型不起作用

    尝试跟随开放日光开发者教程获得在控制器上运行的初始 hello world 应用程序 但是运行命令 mvn archetype generate DarchetypeGroupId org opendaylight controller D
  • Dictionary 和 ConcurrentDictionary 之间修改集合时的不同行为

    使用如下所示的正常字典代码 我得到的异常是 集合已修改 枚举操作可能无法执行 Dictionary
  • 比较目标 C 中的时间和日期

    例如 如何在目标 C 中进行比较 以查看某个时间和日期期间是否与 plist 中已有的另一个时间和日期期间重叠 这最常用于预订 预订应用程序 以查看该特定时间段是否已被占用等 尝试这个来比较 NSDateFormatter dateForm
  • 在“unload”方法中关闭连接

    我继承了一个 Web 框架 以前的开发人员在页面生命周期的 init unload 方法中打开和关闭了他的数据库连接 本质上构造函数是这样的 简化以演示要点 public class BasePage protected DBConnect
  • C++货币输出

    我现在正在学习 C 课程 并已完成期末作业 然而 有一件事困扰着我 虽然我有正确的输出来测试特定的输出 basepay应该133 20它显示为133 2 有没有办法让它显示额外的 0 而不是将其保留 有人知道这是否可能以及如何做到吗 先感谢
  • ArrayUtil 在 Java 中导致意外错误

    每当我编写包含 ArrayUtil 的代码时 它都会导致意外错误 int values ArrayUtil randomIntArray 30 300 我使用 Eclipse 编写代码 并且 ArrayUtil 下始终有红色下划线 我究竟做
  • 下载文件夹的 Apache 热链接保护

    我试图避免从其他网站直接链接到我网站的可下载内容 我的 exe zip 和 msi 文件位于 files 目录下 我怎样才能避免直接链接到它们 提前致谢 将以下内容添加到 files 目录中的 htaccess 文件中 RewriteEng
  • Android Studio 上未找到名称为“default”的配置错误

    我正在尝试测试参考而不复制库项目 所以我创建了两个项目 一个是ProjectA其中之一是LibraryA 两个项目均位于 工作室项目文件夹 我正在尝试参考LibraryA from ProjectA我在标题中得到了错误 Here is 设置
  • awk 无法忽略“++”

    check a1 awk F v name check tolower 2 tolower name file txt 似乎 awk 在处理 字符串时存在一些问题 它无法检索文件中的值 然而 我已经尝试过改变check 44b 看起来工作得
  • 异常:“数据库行 [UnmarshalRecordImpl()] 中缺少类指示符字段。”使用 EclipseLink JAXB (MOXy) 解组 XML 时

    是否有任何方法可以使用 XmlDecriminatorNode XmlDecrimintatorValue 注释对下一个 XML 进行解组 或者有任何解决方法
  • 表示换行的首选位置

    假设我想在 HTML 表格单元格中显示以下文本 Honey Nut Cheerios Wheat Chex Grape Nuts Rice Krispies Some random cereal with a very long name