【已解决】在Html5里，如何在同一行里让“几个文字”分成二行显示？类似：让公式的上标、下标同时并列显示？

yq-ysy · #1

举个例子，我想在网页上显示一个简单的公式：
a1的平方 + b2的立方 = c3的10次方
在网上搜索了一下，有两种方式解决，
但对我来说都有点问题，不知应该如何解决？

方法一：在sup标签或sub标签里，加入 style="margin-top:-15px"，
但我在Firefox游览器里测试，上下没效果？左右有效果，但文字有重叠。
如何才能把上标下标的垂直距离拉开？

代码：全选

<html>
<body>
文字<sup>上标</sup><sub style="margin-top:-15px">下标</sub>测试
<br>
文字<sup>上标</sup><sub style="margin-left: -2em">下标</sub>测试
</body>
</html>

方法二：用几条css来设置
这上标下标的垂直距离是拉开了，但却跑到前面文字里头，和前面的文字重叠了。
而且似乎 Sample Text 1 和 Sample Text 2 不能串联起来？
这样的话，一行数学公式就被打断，变成二行了。
应该让上标下标接在前面文字的后面，并且往后还能继续其它文字（在同一行里）？

代码：全选

<html>
<head>
<style>
    supsub {position: absolute;}
    subscript{color: green; display:block; position:relative; left:1em; top: -5px;}
    superscript{color: red; display:block; position:relative; left:1em; top: -5px;}
</style>
</head>
<body>
<br><supsub>Sample Text 1 </supsub>
<sup><superscript>Sup 1</sup>
<sub><subscript>Sub 1</sub>
<supsub>Sample Text 2</supsub>
<sup><superscript>Sup 2</sup>
<sub><subscript>Sub 2</sub>
</body>
</html>

astolia · #2

数学公式最好不要用sub、sup之类的东西手写。如果限定firefox浏览的话，可以直接上MathML

代码：全选

<math><msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><msub><mi>z</mi><mn>4</mn></msub></math>

其他浏览器可以用MathJax库来实现显示

代码：全选

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<math><msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><msub><mi>z</mi><mn>4</mn></msub></math>
</body>
</html>

MathJax库也可以直接用latex语法

代码：全选

<html>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<body>
<div>\( x^{2}_{1} + y^{3}_{2} = z^{10}_{3} \)</div>
</body>
</html>

yq-ysy · #3

astolia 写了： ↑2021-03-17 11:48 数学公式最好不要用sub、sup之类的东西手写。如果限定firefox浏览的话，可以直接上MathML

谢谢答复。
我只是用“数学公式”来举例，
实际上我就是想要：在同一行里能分成上下两行显示文字（汉字）。
这是一种特殊的排版需求。

看网上的文章有些说“某些游览器不支持公式显示”。
而且，我希望这种排版，能在离线、不上网的条件下阅读，
所以才想用上标、下标的解决方式。

astolia · #4

mathml或mathjax只是排版工具，你单纯用它们的上下标功能来分行显示文字也没有问题。如果你的特殊排版是文字标注拼音这种的，html有现成的ruby文字方案

我也不知道你写来是干什么的，如果仅供自己或组织内部阅读，选用mathml方案+限定用firefox也是可行的。另外今年2季度开始chrome会重新开始mathml支持工作，所以mathml方案未来可期。

另外你给我的感觉就是没有系统学习过css排版方面的东西，写的css都是靠蒙靠猜。在这种情况下用latex语法+mathjax库就是维护起来最简单的方案。你可以把mathjax库和相关资源文件下载下来放到本机，一样可以在离线环境下使用 http://docs.mathjax.org/en/latest/web/hosting.html。

纯css方案需要你对css排版相对了解，才能适应各种需求变化

astolia · #5

试了下ruby方案，firefox里面效果不错，chrome系的话，上排部分比下排部分长的话，下排文字会分散对齐且无法调整为左对齐。IE上下排都是分散对齐无法调整

代码：全选

<html>
<body>
<style>
ruby { font-size: 0.5em; white-space: pre; }
rt { font-size: 1em; white-space: pre; text-align: left; }
</style>
<p>文字<ruby>长长长下排1<rt>上排1</rt></ruby>测试<ruby>下排2<rt>长长长上排2</rt></ruby>测试</p>
</body>
</html>

astolia · #6

又想到了一种无折行情况下兼容性最好的表格布局方案，连旧版IE都可以支持，对td设置text-align属性实现各种对齐也很方便

代码：全选

<html>
<body>
<style>td:not([rowspan]) { font-size: 0.5em; }</style>
<table>
  <tr><td rowspan=2>文字</td><td>上标</td><td rowspan=2>文字</td><td>长长长长长上标</td><td rowspan=2>文字</td><td>上标</td></tr>
  <tr><td>下标</td><td>下标</td><td>长长长长长下标</td></tr>
</table>
</body>
</html>

astolia · #7

再加一个flexbox布局方案，可以支持IE11

代码：全选

<html>
<body>
<style>
span { vertical-align: middle; }
.container { display: inline-flex; flex-direction: column; }
.supsub { font-size: 0.6em; }
</style>
<p><span>文字</span><span class="container"><span class="supsub">上标</span><span class="supsub">下标</span></span><span>文字</span><span class="container"><span class="supsub">长长长长长上标</span><span class="supsub">下标</span></span><span>文字</span><span class="container"><span class="supsub">上标</span><span class="supsub">长长长长长下标</span></span><span>文字</span></p>
</body>
</html>

yq-ysy · #8

astolia 写了： ↑2021-03-17 13:29 我也不知道你写来是干什么的……
另外你给我的感觉就是没有系统学习过css排版方面的东西，写的css都是靠蒙靠猜……
纯css方案需要你对css排版相对了解，才能适应各种需求变化

感谢你提出的多个解决方案，这些方案各有各的好处，也各有各的不足。
之前我还试过“首字下沉”的 span 方案，也是弄不好。
试用了这几个方案，也让我反思：我的需求的“本质”是什么？
——把这些方案摆在一起也好，以后有人遇到类似问题，看这一个帖子就能找到适合他的解决方案。

我是想做一个HTML5网页版的教程，然后放到网上共享。
所以才希望：可以离线阅读、尽量兼容（电脑、手机）各种浏览器（微软IE除外，它都自杀了，也就免了）。
由于不需要太花俏的美化，所以就没学习HMTL5和CSS排版，
只想着能解决少有的几个关键应用就行，把更多的精力放在教程的编写上。
同时，在编写教程时，也希望源代码能简洁、易读，易操作；甚至方便让其他不懂html代码的人也能接手修改。
这也就是我不想采用表格的原因，一大堆<tr><td>把教程的原文字都打乱了，不直观，不方便编写和修改。

之前也许是我的表述不够准确，其实我“本质”需求是：
在同一行里让“其中几个文字”分成二行显示。
我在网上又找到一个解决方案，行内分块： display:inline-block;
这个方案最简单，排版美观，可灵活调节，阅读、编写、修改都很直观方便。

代码：全选

<html>
<head>
<style>
    db{display:inline-block; vertical-align: middle; text-align: center; }
</style>
</head>
<body>
<p>测试：<db>长长长上排1<br>下排1</db>接中间文字<db>上排2<br>长长长下排2</db>接后续文字</p>
</body>
</html>