请教:能否通过修改css,实现中文翻译在英文例句的上面(通常是英上中下)?

如题。能否通过修改CSS,实现中文翻译在英文例句的上面?通常是英文例句在上,下面紧接着是中文翻译。

单独的 CSS 多半不可以。

具体问题具体分析,你要具体一点:例句那儿的 HTML 是怎样的。

1 个赞

如果仅仅是默认显示英文,点击英文后,汉字出现在英文的上方。

可以利用

transform: translateY(25px)

以及 text-indent: 100%

进行简单的调整。。

自认为这解决方式很丑陋。中英所占的div,以及里面的数据被哪些功能所依赖而被改动是否还如期显示,牵一发动全身。

如你所见,英和汉不是并列的,英套汉,所以句子左边样式要改,整个div的上面的边距要改大。

又或者用js在点击事件时:直接清空英文内容,新建节点到汉文后,实现中上英下。

不过查英语词典不是为了学英语吗,把汉语放上面的用意是什么呢?

1 个赞

弹性布局应该可以,但是正如hua大说的,html都没看到,所有的帮助都是纸上谈兵

就是这个词典 :【已完结】 SIO双向双解词典v3.3 - 英汉汉英 - FreeMdict Forum
打算把这个词典里的例句,先根据中文自己翻译,然后对照英文原句,找出自己的错漏。所以需要中上英下。望大佬不吝赐教,谢谢!

使用css把英文隐藏,鼠标覆盖或点击后显示,看了一下这个词典的格式标注,没有问题

技术小白完全不懂。。。能否把代码贴上来 :grinning:

对,这个思路很好

here you go

才疏学浅,依旧是很丑陋的办法。

  1. 默认是中文,英文是倒着的。
  2. 点击一下,就倒回来了。
  3. 需要点击其他地方退出第2步(如果你想回到第一步)。

siov32.css (3.3 KB)

论坛里卧虎藏龙,期待各位更优雅简洁的实现。

更新

上面的方法闪的眼疼,直接用隐藏+点击了。

siov32.css (3.3 KB)

1 个赞

辛苦了,基本是这个效果,反查汉语时有点小问题,另外补充两点:
1、有一个不太完美的地方,就是只要进入文本范围,不论鼠标放在哪里都会显示英文部分,理想的方式是鼠标放在中文那里时,英文不显示,只有移动到英文那里时才显示,可惜这部词典英文例句部分并没有单独用标签包起来,导致这个方式目前单单用css没办法实现,我能想到的一个变通方式是使用visibility属性,可以实现仅当鼠标放在中文那里时,才显示对应的英文。
2、中文全部都另起一行的话有些词条看上去会很长,是不是词语搭配部分可以紧凑一些?如果有的同学不想词语搭配换行,代码如下:

span.pg_phrase~span.pg_exam zh_cn
{
	display: inline;
}
2 个赞

太感谢了!这个结果比我之前设想的还要好,整个页面看起来清爽简洁,不会很多字堆在一起,又不影响看每个例句,而且看例句前可以自己试着表达。 :heart_eyes: