[已解决]怎么处理ruby标签行的自动折行呢？

blackantt · 发表于 2023-6-3 14:54:32

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

没查到怎么让 ruby 标签行按整体设置折行呢？

ruby-折行.jpg

最佳答案

月排行榜 / 总排行榜

陶远航

2023-6-3 16:05:54

blackantt 发表于 2023-6-3 15:39
pre-line; pre-wrap; 好像都不变。不知道哪出问题了

你能看下6楼码吗？

你可以尝试下面这个 CSS 样式：

ruby {
    display: inline-block;
}

这个样式可以将 ruby 标签中的内容作为一个整体进行处理，并强制该整体不会被分割成多行。

跳转到最佳答案楼层

isdkz · 发表于 2023-6-3 14:54:57

对于ruby标签行的自动折行，可以使用CSS中的white-space属性来控制。具体来说，可以将white-space属性设置为pre-wrap或者pre-line，这样就可以让ruby标签行按整体设置折行了。其中，pre-wrap表示保留空格和换行符，同时允许自动换行；pre-line表示保留空格和换行符，但只在遇到换行符时才会自动换行。例如，可以在CSS中添加以下样式代码来实现：

ruby {
white-space: pre-wrap;
}

这样，就可以让ruby标签行按整体设置折行了。

陶远航 · 发表于 2023-6-3 14:55:40

您可以使用 CSS 的 white-space: pre-line; 属性来实现 Ruby 标签中的文本按整体设置折行。这将保留文本中的空格和换行符，并将其他空格和文字自动进行折行。例如：

<ruby style="white-space: pre-line;">
  漢<rt>かん</rt>
  字<rt>じ</rt>
</ruby>

其中，white-space: pre-line; 可以在内联样或外部样式表中设置。

歌者文明清理员 · 发表于 2023-6-3 15:03:32

陶远航发表于 2023-6-3 14:55
您可以使用 CSS 的 white-space: pre-line; 属性来实现 Ruby 标签中的文本按整体设置折行。这将保留文本中 ...

wc

陶远航 · 发表于 2023-6-3 15:05:27

歌者文明清理员发表于 2023-6-3 15:03
wc

? 怎么了

blackantt · 发表于 2023-6-3 15:34:59

本帖最后由 blackantt 于 2023-6-3 15:36 编辑

isdkz 发表于 2023-6-3 14:54
对于ruby标签行的自动折行，可以使用CSS中的white-space属性来控制。具体来说，可以将white-space属性设置 ...

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="a1.css">     
</head>
<body>
  
<span class="ipa"><ruby><rb>THIS</rb><rt>ðɪs</rt></ruby> <ruby><rb>BOOK</rb><rt>bʊk</rt></ruby> <ruby><rb>IS</rb><rt>ɪz</rt></ruby> <ruby><rb>THE</rb><rt>ðə</rt></ruby> <ruby><rb>PROPERTY</rb><rt>ˈprɑpərti</rt></ruby> <ruby><rb>OF:</rb><rt>ʌv:</rt></ruby> <ruby><rb>STATE</rb><rt>steɪt</rt></ruby>   <ruby><rb>PROVINCE</rb><rt>ˈprɑvəns</rt></ruby>   <ruby><rb>COUNTY</rb><rt>ˈkaʊnti</rt></ruby>   <ruby><rb>PARISH</rb><rt>ˈpærɪʃ</rt></ruby>   <ruby><rb>SCHOOL</rb><rt>skul</rt></ruby> <ruby><rb>DISTRICT</rb><rt>ˈdɪstrɪkt</rt></ruby>   <ruby><rb>OTHER</rb><rt>ˈʌðər</rt></ruby>   <ruby><rb>Book</rb><rt>bʊk</rt></ruby> <ruby><rb>No.</rb><rt>noʊ.</rt></ruby> <ruby><rb>Enter</rb><rt>ˈɛntər</rt></ruby> <ruby><rb>information</rb><rt>ˌɪnˌfɔrˈmeɪʃən</rt></ruby>  <ruby><rb>in</rb><rt>ɪn</rt></ruby> <ruby><rb>spaces</rb><rt>ˈspeɪsəz</rt></ruby>  <ruby><rb>to</rb><rt>tu</rt></ruby> <ruby><rb>the</rb><rt>ðə</rt></ruby> <ruby><rb>left</rb><rt>lɛft</rt></ruby> <ruby><rb>as</rb><rt>æz</rt></ruby>  <ruby><rb>instructed.</rb><rt>ˌɪnˈstrʌktəd.</rt></ruby></span><span class="cn">本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。本书归以下所有者所有：州省县教区学区其他书号。按照说明在左侧空格处输入信息。</span>
    </body>  
    </html>

a1.css

body { width:400px; text-align:center; margin-top: 50px; margin-right: auto; margin-bottom: auto; margin-left: auto;}


/* span { white-space: pre-line;} */

span {
  white-space: pre-wrap;
}

pre-line; pre-wrap; 好像都不变。不知道哪出问题了

blackantt · 发表于 2023-6-3 15:39:21

陶远航发表于 2023-6-3 14:55
您可以使用 CSS 的 white-space: pre-line; 属性来实现 Ruby 标签中的文本按整体设置折行。这将保留文本中 ...

pre-line; pre-wrap; 好像都不变。不知道哪出问题了

你能看下6楼码吗？

歌者文明清理员 · 发表于 2023-6-3 15:55:16

blackantt 发表于 2023-6-3 15:34
a1.css

他是开的脚本，人在睡觉

blackantt · 发表于 2023-6-3 15:59:03

歌者文明清理员发表于 2023-6-3 15:55
他是开的脚本，人在睡觉

难怪不管用。 ChatGPT很多答案都是瞎编的 :)

歌者文明清理员 · 发表于 2023-6-3 16:00:47

要让 ruby 标签行按整体设置折行，可以在需要换行的位置添加<rp>标签并设置样式为display: inline-block;。下面是示例代码：
Copy Code
<ruby>
振り<rp style="display: inline-block;">（</rp><br>ふり<rp style="display: inline-block;">）</rp>
</ruby>
在上面的代码中，<rp>标签表示在 ruby 文本中显示括号的位置，样式设置为display: inline-block;可以让它在一行内占用整个宽度并触发折行。可以根据需要调整<rp>标签的样式。

blackantt · 发表于 2023-6-3 16:05:03

歌者文明清理员发表于 2023-6-3 16:00
要让 ruby 标签行按整体设置折行，可以在需要换行的位置添加标签并设置样式为display: inline-block;。下面 ...

能否让 ruby 遵循 html 的代码 (body { width:400px; text-align:center; margin-top: 50px; margin-right: auto; margin-bottom: auto; margin-left: auto;}) 自动折行呢？不可能每行都手动指定啊。

陶远航 · 发表于 2023-6-3 16:05:54

blackantt 发表于 2023-6-3 15:39
pre-line; pre-wrap; 好像都不变。不知道哪出问题了

你能看下6楼码吗？

你可以尝试下面这个 CSS 样式：

ruby {
    display: inline-block;
}

这个样式可以将 ruby 标签中的内容作为一个整体进行处理，并强制该整体不会被分割成多行。

blackantt · 发表于 2023-6-3 16:11:47

陶远航发表于 2023-6-3 16:05
你可以尝试下面这个 CSS 样式：

终于好了。谢谢

blackantt · 发表于 2023-6-3 16:12:25

歌者文明清理员发表于 2023-6-3 16:00
要让 ruby 标签行按整体设置折行，可以在需要换行的位置添加标签并设置样式为display: inline-block;。下面 ...

谢谢。怎么加分呢

歌者文明清理员 · 发表于 2023-6-3 16:15:43

blackantt 发表于 2023-6-3 16:12
谢谢。怎么加分呢

blackantt互助团队

查看详细资料

259
主题

314
回帖
898
荣誉

中级鱼油II

技术值0 . 发消息
..
14#

  楼主| 发表于 2 分钟前 | 只看该作者

歌者文明清理员发表于 2023-6-3 16:00
要让 ruby 标签行按整体设置折行，可以在需要换行的位置添加标签并设置样式为display: inline-block;。下面 ...

谢谢。怎么加分呢

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com

点评回复支持  反对
评分举报

账号		自动登录	找回密码
密码			立即注册