带有“ =”符号的文本对齐方式

如何解决带有“ =”符号的文本对齐方式

我要使文本以“ =”符号对齐，如下图所示：

我可以使用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

解决方法

您可以在班级中使用显示，文本对齐和宽度：

.c-left{
  text-align: right;
  width: 50px;
  display: inline-block;
}

.c-mid{
  text-align: center;
  width: 10px;
  display: inline-block;
}

.c-right{
  text-align: left;
  width: 50px;
  display: inline-block;
}

<div>
  <div class="c-left">a + b</div>
  <div class="c-mid">=</div>
  <div class="c-right">c</div>
</div>
<div>
  <div class="c-left">2a + 2b</div>
  <div class="c-mid">=</div>
  <div class="c-right">3c</div>
</div>

不确定这是否是您需要的...

,

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

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

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

下面是使用原始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,"&therefore; x = 4"]'></math-element>

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

如果您发现CSS网格语法和逻辑混乱，则可以始终使用<table>和<tr>创建一个<td>，这将为您提供更简单的选择器。我不建议这样做。

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

很明显，您可以修改CSS（例如，删除font-style，调整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;
}

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