1

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

对齐 div 的最后一行？

<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>　わたしたちは今日、ミチコの手を&lt;ruby>離&lt;rt>はな</rt></ruby>し、ミチコとは二度と会わないと決めたのだけれど、ひょっとして見捨てられてしまうのはわたしたちのほうなんじゃないだろうか。今日ここで起きたことはすべて、ミチコと別れることでさえ、ひょっとしてミチコにとってはとっくに計算済みの出来事だったんじゃないだろうか。&lt;/p>
      <p>　そのときふと気づいた。ミチコの&lt;ruby>眼&lt;rt>まな</rt></ruby><ruby>差&lt;rt>ざ&lt;/rt></ruby>しが意味するものに。あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。今日ここにいること、ここで起きたこと、いまこの瞬間この世の中で起きているあらゆることを哀れみ、そして</p>
    </DIV>
  </body>
</html>
4

2 回答 2

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>あれは&lt;ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。&lt;/p>
</div>

The :after pseudo element adds extra space after the paragraphs due to its line-height (you can't remove the line-height just from it alone as it's treated as just another piece of text within the p tag). To compensate for this you need to add a negative left margin to the paragraphs.

于 2012-06-28T06:59:17.630 回答
0

您的 CSS 样式存在错误。direction: ltr应该是direction: rtl。尝试改变它，让我知道它是否有效。

于 2012-06-25T14:50:25.080 回答