时间戳

首页 > 解决方案 > 带有“=”符号的文本对齐

html - 带有“=”符号的文本对齐

问题描述

我想将文本与“=”符号对齐，如下图所示：

在此处输入图像描述

我可以使用 mathjax 来实现，但如果可能的话，我想使用 css 来实现。但是我这样做的方式不是使等号符号彼此对齐。我需要你的帮助。

这是我试过的，

Solution, <br>
Given, f(x) = 3x <br>
g(x) = x + 2 <br>
fog(x) = 18 <br>
To find: x = ?, <br>
Now, <br>
fog(x) = 18 <br>
or, f(x + 2) = 18 <br> 
or, 3(x + 2) = 18 <br>
or, x + 2 = 6 <br>
&therefore; x = 4

标签： htmlcssalignmenttext-alignment

解决方案

您的问题是将文本排列成易于使用 CSS 设置样式的表单。假设您的文本以 JSON 字符串数组的形式出现，即：

[
  "Solution,",
  "Given, f(x) = 3x",
  "g(x) = x + 2",
  "fog(x) = 18",
  "To find: x = ?,",
  "Now,",
  "fog(x) = 18",
  "or, f(x + 2) = 18",
  "or, 3(x + 2) = 18",
  "or, x + 2 = 6",
  "&therefore; x = 4"
]

...您想要一个将其转换为可样式标记的功能。

这是一个使用 vanilla Javascript 和 CSS 网格的示例：

[...document.querySelectorAll('math-element')].forEach(el => {
  // reset, in case you run this more than once...
  el.innerHTML = '';
  
  // we need JSON.parse as dataset.text is a string
  JSON.parse(el.dataset.text).forEach(text => {
    const div = document.createElement('div');
    // split each row by `=` sign, if it has any
    text.split('=').forEach(t => {
      const span = document.createElement('span');
      if (text.split('=').length < 2) {
        // adds `.single` to items which are single on their row
        span.classList.add('single');
      }
      span.innerHTML = t;
      el.appendChild(span);
    });
    // add a `<hr>` after each element
    const separator = document.createElement('hr')
    el.appendChild(separator);
  })
})
math-element {
  display: grid;
  grid-template-columns: auto 1fr;
}
math-element hr {
  display: none;
}
math-element span {
  grid-column-start: 1;
  text-align: right;
  padding: 0 2px 0 1rem;
}
math-element span:not(.single) {
  font-style: italic;
}
math-element span.single {
  text-align: left;
  padding-top: .5rem;
  font-style: normal;
}
math-element span + span {
  grid-column-start: 2;
  text-align: left;
  padding: 0 2px;
}
math-element span + span:before {
  content: '=';
}
<math-element data-text='["Solution,","Given, f(x) = 3x","g(x) = x + 2","fog(x) = 18","To find: x = ?,","Now,","fog(x) = 18","or, f(x + 2) = 18","or, 3(x + 2) = 18","or, x + 2 = 6","&therefore; x = 4"]'></math-element>

您不必像我一样将值内联为字符串，您可以简单地动态创建元素并forEach直接在数据上运行。

如果您发现 CSS 网格语法和逻辑令人困惑，您始终可以创建一个<table>with<tr>和<td>s，这将为您提供更简单的选择器。出于原则，我建议不要这样做。

我用<hr>s 来标记每个“行”的结尾（CSS 网格要求所有单元格都是兄弟）。相反，您可以将行内容嵌套到单个元素 ( <div>?) 中并对列宽进行硬编码。

显然，CSS 是您可以修改的（即：删除font-style's、调整padding值等...）。

最后一点：如果一个“行”包含多个=符号，由于这条规则：

math-element span + span {
  grid-column-start: 2;
}

连续跨越 2 和 3 （以及随后，直到行尾）将在彼此下方显示一个，每个都以一个=符号为前缀并与其余部分对齐（这还不错，恕我直言）。如果你想改变这种行为，你可能想提供一个

math-element span + span + span {
  grid-column-start: 3;
}

...规则，等等。您还需要更改grid-template-columns以匹配：

math-element {
  grid-template-columns: auto auto 1fr;
}

...匹配“列”的数量。

推荐阅读