Question

我需要能够证明p元素的最后一行。我在以下问题中尝试了解决方案

但遗憾的是，当<DIV> writing-mode样式为tb-rl（从上到下/从右到左）且文本为日语时，这不起作用。有没有人有类似的需求，并找到了解决方案？这是我目前正在使用的HTML示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">`
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>p {text-align:justify;margin:0px; padding-right:7px}</style>
  </head>
      <body style='margin:6px'>
        <DIV style='height: 444px; width: 320px; writing-mode: tb-rl; direction: ltr; -ms-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; font-family:"Hiragino Mincho ProN"; font-size:16px'>
      <p style='margin-right: 0px; margin-left: 0px;'>　</p><p>　わたしたちは今日、ミチコの手を<ruby>離<rt>はな</rt></ruby>し、ミチコとは二度と会わないと決めたのだけれど、ひょっとして見捨てられてしまうのはわたしたちのほうなんじゃないだろうか。今日ここで起きたことはすべて、ミチコと別れることでさえ、ひょっとしてミチコにとってはとっくに計算済みの出来事だったんじゃないだろうか。</p>
      <p>　そのときふと気づいた。ミチコの<ruby>眼<rt>まな</rt></ruby><ruby>差<rt>ざ</rt></ruby>しが意味するものに。あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。今日ここにいること、ここで起きたこと、いまこの瞬間この世の中で起きているあらゆることを哀れみ、そして</p>
    </DIV>
  </body>
</html>

Answer 1

您需要使用我发布的方法的略微变化来证明水平文本的合理性。

不是将：after伪元素的宽度设置为100％，而是将高度设置为100％。

<强> CSS：

p {
    margin: 0;
    margin-left: -1.8em; /* remove space added by p:after (adjust) */
}

/* justify last line of text */
p:after {
    content: "";
    display: inline-block;
    height: 100%;
}

/* set writing direction on container */
div.page {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: justify;
    text-justify: inter-ideograph; /* supported by IE */
}

<强> HTML：

<div class="page">
    <p>あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。</p>
</div>

：之后的伪元素由于它的行高而在段落之后增加了额外的空格（你不能仅仅从它那里删除行高，因为它被视为其中的另一段文本p标签）。为了弥补这一点，您需要在段落中添加负左边距。

Answer 2

CSS样式中存在错误。 direction: ltr应为direction: rtl。尝试更改此内容并告诉我它是否有效。

使用日语tategaki时，对齐块元素的最后一行（p，div）（write-mode：tb-rl）

2 个答案: