我找到了解决方案,至少可以看起来像我期望的效果。 重点是让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的间距)。
错误: