在 HTML 和 CSS 中,如何使日文文本正确换行?

发布于 2024-10-21 05:25:06 字数 186 浏览 2 评论 0原文

我正在用英语和日语写一个简单的段落,仅使用 HTML 和 CSS。英文文本通常会换行(当一个单词不再适合一行时,它会被推到下一个)。

但对于日语来说,并不是整个单词都会被推到下一行,而只是其中的一部分。我尝试将自动换行设置为断词和正常,但没有任何变化(对于日语文本)。

如何使日语中的整个单词跳到下一行,就像英语中发生的那样?

I'm writting a simple paragraph in both English and Japanese, using only HTML and CSS. The English text breaks lines normally (when a word doesn't fit on a line anymore, it's pushed to the next one).

With Japanese though, not a whole word is pushed to the next line, but part of it only. I've tried setting word-wrap to break-word and normal, but nothing changes (with the Japanese text).

How to I make whole words in Japanese jump to the next line like it happens in English?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

栖竹 2024-10-28 05:25:06

英语用空格分隔单词,日语则不然。

日语中的字符是否构成单词取决于上下文。在许多情况下,寻找某些语法(假名)助词可以用来分隔单词 - 但这甚至远不可靠。

本质上,您需要一本日语词典/对该语言的理解来识别单词的开头和结尾 - 浏览器不知道如何执行此操作。

或者,如果您知道单词的开头和结尾,您也许可以将每个单词包装在一个跨度中 - 然后使用 CSS 来确保每个跨度在不适合时作为一个整体换行到一个新行。

English separates words with spaces, Japanese doesn't.

Whether characters in Japanese form a word or not depends on context. In many cases, looking for certain grammatical (Kana) particles could be used to separate words - but this wouldn't even be close to being reliable.

Essentially, you'd need a Japanese dictionary / understanding of the language to identify where the words start and end - a browser won't know how to do this.

Alternatively, if you know the start and end of the words, you could perhaps wrap each one in a span - then use CSS to ensure each span wraps to a new line as a whole when it doesn't fit.

诗化ㄋ丶相逢 2024-10-28 05:25:06

日语在破坏文本时有特定的规则。它们被称为禁则处理(kinsoku shori)。 此处是解释规则的链接。这些规则主要涉及特殊字符。看一下任何流行的日语网页,您都会发现多字符(假名和汉字)单词经常被拆分。我经常看到です在行之间分裂。

更新:
我最近偶然发现了这个工具。我还没有尝试过,但这个理论是可靠的。如果有人希望改进日语文本的换行符,这可能是一个很好的解决方案。

Japanese has specific rules that are followed when breaking text. They are called 禁則処理 (kinsoku shori). Here is a link explaining the rules. The rules are mostly concerned with special characters. Have a look at any popular Japanese webpage and you will see that multi-character (kana and kanji) words are often split. I often see です split between lines.

Update:
I stumbled across this tool recently. I haven't tried it out yet, but the theory is solid. If someone is looking to improve the line breaks with Japanese text this could be a good solution.

若言繁花未落 2024-10-28 05:25:06

尝试设置 css 属性,

line-break:strict;

请查看此处

try setting the css property

line-break:strict;

Check it out here.

ゝ杯具 2024-10-28 05:25:06

我不是日语专家,所以我很难判断事情是否正确包装,但我只需要自己解决这个问题以及 word-break: keep-allwhite-space: nowrap 似乎为我解决了这个问题,所以这些可能值得尝试。

I'm not an expert with Japanese specifically so it's hard for me to tell if things are wrapping correctly, but I just had to solve this problem myself and both word-break: keep-all and white-space: nowrap seemed to solve the issue for me, so those might be worth trying out.

伤痕我心 2024-10-28 05:25:06

在浏览器足够聪明,可以对语言进行即时语义分析之前,只有几个选择:

1/ 足够了解该语言,以便能够将语义元素分组到它们自己的、牢不可破的 DOM 元素中。像这样的东西(没有换行符):

<span class="el">私は</span>
<span class="el">キッチンで</span>
<span class="el">パンを</span>
<span class="el">食べました。</span>

然后在 CSS 中,使用类似 .el { display: inline-block; } 的东西。 }。您可能只想对标题和重要文本片段执行此操作,因为它可能会影响可访问性(即屏幕阅读器如何解释文本)。其他不便之处是 1/ 您需要理解文本才能知道在哪里添加块,2/ 这显然只适用于静态文本(即使在这种情况下,它仍然是一个手动的、艰苦的过程)。

2/ 使用可以为您进行分组的工具。它可能是客户端的东西,比如 TinySegmenter (它确实分段了< em>太多了(恕我直言),或者在服务器端,比如Budou 使用 Google Cloud 自然语言API 和 ML 来分​​析您的句子。缺点(至少对于 Budou 来说)是 1/ 你需要 Python(我想我在某处看到了 Node.js 端口),2/ 它不是免费的。

希望这有帮助!

Until the browsers are smart enough to do on-the-fly semantic analysis of the language, there are only a couple of options :

1/ Understand enough of the language to be able to group semantic elements in their own, unbreakable DOM elements. Something like (without the line breaks) :

<span class="el">私は</span>
<span class="el">キッチンで</span>
<span class="el">パンを</span>
<span class="el">食べました。</span>

Then in CSS, use something like .el { display: inline-block; }. You probably want to do this only on headings and important text pieces only, since it could impact accessibility (ie. how screen readers interpret the text). The other inconvenients are that 1/ you need to understand the text to know where to add the blocks, and 2/ this obviously only works for static text (and even in that case, it's still a manual, painstaking process).

2/ Use a tool that does the grouping for you. It could be something on the client side, like TinySegmenter (whitch does segment a bit too much for my taste IMHO), or on the server-side, with things like Budou that use Google Cloud Natural Language API and ML to analyze your sentences. The downsides (at least for Budou) is that 1/ you need Python (I think that I saw a Node.js port somewhere), and 2/ It's not free.

Hope this helps!

避讳 2024-10-28 05:25:06

执行此操作的规范(也是最简单)方法是设置 换行符:严格;。根据我可以使用,该属性现在得到了广泛的支持 (93%+)。

The canonical (and easiest) way to do this is to set line-break: strict;. According to Can I Use, this property has widespread support (93%+) now.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文