Не помещается математическая формула в контейнер, что делать?

Question

[vahromeevilya-widestudio]

Есть математическая формула
https://codepen.io/vahromeevilya-widestudio/pen/mdayYjO



Формула не помещается в контейнер

Как сделать так , чтобы она ломалась будто это word-break: break-all;

При этом варианты с overflow: auto или display: flex; flex-wrap:wrap;align-items:center;
Не подходят. Потому что они визуально меняют формулу

<div class="container">
				<math xmlns:mml="http://www.w3.org/1998/Math/MathML"
					xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math">
					<mo>⊐</mo>
					<mo>∀</mo>
					<mi>i</mi>
					<mo>∈</mo>
					<mo>{</mo>
					<mn>1</mn>
					<mo>,</mo>
					<mo> </mo>
					<mo>.</mo>
					<mo>.</mo>
					<mo>,</mo>
					<mo> </mo>
					<mi>n</mi>
					<mo>}</mo>
					<mo> </mo>
					<mo>:</mo>
					<mfenced open="|" close="|" separators="|">
						<mrow>
							<msub>
								<mrow>
									<mi>X</mi>
								</mrow>
								<mrow>
									<mi>i</mi>
								</mrow>
							</msub>
						</mrow>
					</mfenced>
					<mo>=</mo>
					<msub>
						<mrow>
							<mi>k</mi>
						</mrow>
						<mrow>
							<mi>i</mi>
						</mrow>
					</msub>
					<mo> </mo>
					<mo>⊐</mo>
					<mi>k</mi>
					<mo>=</mo>
					<mrow>
						<mrow>
							<munder>
								<mrow>
									<mi mathvariant="normal">inf</mi>
								</mrow>
								<mrow>
									<mi>i</mi>
									<mo>∈</mo>
									<mo>{</mo>
									<mn>1</mn>
									<mo>,</mo>
									<mo> </mo>
									<mo>.</mo>
									<mo>.</mo>
									<mo>,</mo>
									<mo> </mo>
									<mi>n</mi>
									<mo>}</mo>
									<mo> </mo>
								</mrow>
							</munder>
						</mrow>
						<mo>⁡</mo>
						<mrow>
							<msub>
								<mrow>
									<mi>k</mi>
								</mrow>
								<mrow>
									<mi>i</mi>
								</mrow>
							</msub>
						</mrow>
					</mrow>
					<mo>,</mo>
					<mi> </mi>
					<mi>т</mi>
					<mi>о</mi>
					<mi>г</mi>
					<mi>д</mi>
					<mi>а</mi>
					<mi> </mi>
					<mfenced open="|" close="|" separators="|">
						<mrow>
							<msub>
								<mrow>
									<mi>X</mi>
								</mrow>
								<mrow>
									<mn>1</mn>
								</mrow>
							</msub>
							<mo>×</mo>
							<mo>…</mo>
							<mo>×</mo>
							<msub>
								<mrow>
									<mi>X</mi>
								</mrow>
								<mrow>
									<mi>n</mi>
								</mrow>
							</msub>
						</mrow>
					</mfenced>
					<mo>=</mo>
					<mrow>
						<msubsup>
							<mo stretchy="false">∏</mo>
							<mrow>
								<mi>i</mi>
								<mo>=</mo>
								<mn>1</mn>
							</mrow>
							<mrow>
								<mi>n</mi>
							</mrow>
						</msubsup>
						<mrow>
							<msub>
								<mrow>
									<mi>k</mi>
								</mrow>
								<mrow>
									<mi>i</mi>
								</mrow>
							</msub>
						</mrow>
					</mrow>
					<mo>≥</mo>
					<msup>
						<mrow>
							<mi>k</mi>
						</mrow>
						<mrow>
							<mi>n</mi>
						</mrow>
					</msup>
				</math>
			</div>

.container {
  max-width: 500px;
  background:gray;
}

Comments

[Иван Филипов]

Как вариант может быть есть смысл сделать так

@media screen (ваша ширина) {
overflow-y: hidden;
overflow-x:scroll;
}

[vahromeevilya-widestudio]

Иван Филипов, я в описании задачи упомянул данный способ, он к сожалению не подходит. Ломает визуально высоту строки. В итоге формула и текст находятся на разных уровнях. Да и на мобильных устройствах может быть не очевидно что формулу нужно еще и проскролить

[Сергей delphinpro]

Разделите на две части по слову "тогда"

[vahromeevilya-widestudio]

Сергей delphinpro, Да это рабочий способ, но есть ли какой нибудь способ чтобы автоматически переносилось? Я почитал в MDN https://developer.mozilla.org/ru/docs/Web/MathML/E...
Там есть свойство overflow: linebreak; Но оно почему то у меня не работает, как бы не пробовал.