MathJax автоматический разрыв линии не работает ⇐ Html
-
Anonymous
MathJax автоматический разрыв линии не работает
MathJax Line Breaking
window.MathJax = {
tex: {
displayMath: [['$$','$$'], ['\\[','\\]']],
inlineMath: [['\\(','\\)']],
},
chtml: {
displayAlign: 'left',
scale: 1,
linebreaks: {
automatic: true,
width: "container"
}
},
options: {
renderActions: {
addMenu: []
}
}
};
body {
font-family: P052, serif;
margin: 20px;
font-size: 13px;
}
.container {
display: flex !important;
gap: 5px;
width: 800px;
}
.container > div {
width: 50% !important;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: break-word;
page-break-inside: avoid;
}
.math-container {
width: 100%;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
$$
\sum_{i=1}^{n} a_i x_i + \sum_{j=1}^{n} b_j y_j + \sum_{k=1}^{n} c_k z_k + \cdots +
\sum_{m=1}^{n} d_m w_m + \frac{a^2 + b^2 + c^2 + d^2 + e^2 + f^2}{g^2 + h^2 + i^2 + j^2}
$$
$$
A = \sum_{k=1}^{100} \left( \frac{x_k^2 + y_k^2 + z_k^2 + w_k^2 + p_k^2 + q_k^2}
{a_k + b_k + c_k + d_k + e_k + f_k + g_k} \right)
$$
window.addEventListener("load", () => {
MathJax.typeset();
});
< /code>
Предоставленный HTML-код предназначался для отображения двух уравнений, получавших Mathjax, каждое из собственных контейнеров, и каждый контейнер должен иметь ширину 400 пикселей. Цель состоит в том, что если уравнения MathJax слишком длинные, чтобы соответствовать данной ширине контейнера, они должны автоматически разбить несколько строк (то есть применять автоматическое разрыв линии на основе ширины контейнера). < /P>
Однако, когда я открываю этот код в браузере Google Chrome, ожидаемое поведение не происходит. Вместо разрыва линий, длинные уравнения переполняют горизонтально за границы своих контейнеров, которые побеждают цель установить фиксированную ширину контейнера и включение разрыва строк. С текущей реализацией и тем, как я могу ее исправить, так что MathJax должным образом завершает длинные уравнения в следующую строку в их контейнерах шириной 400 пикселей, как во время обычного просмотра, так и при печати страницы.
Подробнее здесь: https://stackoverflow.com/questions/796 ... ot-working
MathJax Line Breaking
window.MathJax = {
tex: {
displayMath: [['$$','$$'], ['\\[','\\]']],
inlineMath: [['\\(','\\)']],
},
chtml: {
displayAlign: 'left',
scale: 1,
linebreaks: {
automatic: true,
width: "container"
}
},
options: {
renderActions: {
addMenu: []
}
}
};
body {
font-family: P052, serif;
margin: 20px;
font-size: 13px;
}
.container {
display: flex !important;
gap: 5px;
width: 800px;
}
.container > div {
width: 50% !important;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: break-word;
page-break-inside: avoid;
}
.math-container {
width: 100%;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
$$
\sum_{i=1}^{n} a_i x_i + \sum_{j=1}^{n} b_j y_j + \sum_{k=1}^{n} c_k z_k + \cdots +
\sum_{m=1}^{n} d_m w_m + \frac{a^2 + b^2 + c^2 + d^2 + e^2 + f^2}{g^2 + h^2 + i^2 + j^2}
$$
$$
A = \sum_{k=1}^{100} \left( \frac{x_k^2 + y_k^2 + z_k^2 + w_k^2 + p_k^2 + q_k^2}
{a_k + b_k + c_k + d_k + e_k + f_k + g_k} \right)
$$
window.addEventListener("load", () => {
MathJax.typeset();
});
< /code>
Предоставленный HTML-код предназначался для отображения двух уравнений, получавших Mathjax, каждое из собственных контейнеров, и каждый контейнер должен иметь ширину 400 пикселей. Цель состоит в том, что если уравнения MathJax слишком длинные, чтобы соответствовать данной ширине контейнера, они должны автоматически разбить несколько строк (то есть применять автоматическое разрыв линии на основе ширины контейнера). < /P>
Однако, когда я открываю этот код в браузере Google Chrome, ожидаемое поведение не происходит. Вместо разрыва линий, длинные уравнения переполняют горизонтально за границы своих контейнеров, которые побеждают цель установить фиксированную ширину контейнера и включение разрыва строк. С текущей реализацией и тем, как я могу ее исправить, так что MathJax должным образом завершает длинные уравнения в следующую строку в их контейнерах шириной 400 пикселей, как во время обычного просмотра, так и при печати страницы.
Подробнее здесь: https://stackoverflow.com/questions/796 ... ot-working
Мобильная версия