用于 RTL 希伯来文本 + 英文文本的 CSS，均在块引用内对齐答案

【问题标题】：CSS for RTL Hebrew text + English text, both with justified alignment within blockquote用于 RTL 希伯来文本 + 英文文本的 CSS，均在块引用内对齐
【发布时间】：2016-03-15 06:14:33
【问题描述】：

在一个块引用中，我试图结合希伯来语段落的英文翻译（顶部），以及希伯来语段落本身（英文翻译下方）。我希望两个段落（英语和希伯来语）都是合理的，但我希望希伯来语文本具有 RTL 文本方向，以便希伯来语段落向页面左侧（而不是右侧，如标准英语段落(LTR))。

以下仅表示块引用中的段落结构，没有任何 CSS 格式：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.

【问题讨论】：

是什么阻止你在块引用中使用<p>？
@DanielB：我认为有更简单的方法。元素会起作用，还是应该使用
元素？
你为什么把自己限制在只有一个块引用？
@harrymc：所以两个引号都包含在包含
元素的同一边框内。我承认我不是 CSS 或 HTML 专家，感谢任何建议。
<span> 不是分隔段落的合适标签。 <p> 表示段落，这就是你所拥有的。多段。想想语义标记。

标签： css hebrew

【解决方案1】：

好奇，我尝试了以下代码，它似乎可以满足您的需求（第一个 dir 参数是多余的，因为 "ltr" 是默认值）。

<blockquote>
  <p dir="ltr">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p dir="rtl">
ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.
  </p>
</blockquote>

这会在您的数据上提供following result：

达到同样效果的CSS way是：

p {
  text-align: justify;
}

p.heb {
  direction: rtl;
}

然后 HTML 将如下所示：

<blockquote>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p class="heb">
ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.
  </p>
</blockquote>

【讨论】：