一个标签中的多语言文本段落,行高大但偏移量不同

问题描述 投票:0回答:1
javascript html css web dom
1个回答
0
投票

我找到了解决方案,至少可以看起来像我期望的效果。 重点是让container表现得像一个stack(flutter中是

Stack
,android中是
FrameLayout
),让children偏移一个特定的值:

<html>
<head>
<style>
.stack-layout {
  position: relative;

  border: solid 1px green;
}

.original {
  margin:0;
  line-height: 4em;
  position: relative;
  top: -1.5em;
}
.lingual {
  margin:0;
  line-height: 4em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  text-decoration: overline red;
}
</style>
</head>
<body>

<p>Hope to develop a html tag or css style, containing multiple language paragraph.</p>

<div class="stack-layout">
  <p class="original">This is some English text. It is a long sentence that spans multiple lines. The quick brown fox jumps over the lazy dog. This is another English sentence that is also quite long.</p>
  <p class="lingual">이것은 일부 영어 텍스트입니다. 여러 줄에 걸쳐 긴 문장입니다. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이것은 또 다른 영어 문장이며, 매우 길기도합니다.</p>
  <p class="lingual" style="top:1.5em">これはいくつかの英語のテキストです。複数行にまたがる長い文章です。素早い茶色の狐がのろまな犬を飛び越えます。これはまた、かなり長い英語の文です。</p>
</div>

<p>Is there any idea for implementing it or any existing great library?</p>

</body>
</html>

行高值为

line-height=<num of paragraphs>em + 0.5em*<num-1>
。行高大时,文本的顶部位置与换行的顶部不对齐,我们偏移
-1.5em
并且每个孩子的顶部增加
1.5em
(1em的字体大小+ 0.5em的间距)。

错误:

  • 文本选择:部分语言文本无法正确选择。
  • 在某些情况下,例如原文有 2 条换行,而译文有 3 行,这会导致大量出现。
© www.soinside.com 2019 - 2024. All rights reserved.