@le0n

I'm not sure if you've solved this already, or whether the following addresses what you are trying to do, but I had a play and came up with the following.

I'm assuming you have wide text as part of some mathematics expression, and you need it to wrap with the option to insert line breaks at desired points. I'm also assuming you want a mobile-friendly solution.

So here's 3 possible solutions.

(1) The first modifies the white-space and display of the span containing text and then makes use of word-wrap: break-word

(2) The second and third examples separate the text from KaTeX for more flexibility. I've wrapped the math expression and the text (which is in a p tag with class "katex", so it has the appropriate font) in a flex div. For word-wrap: break-word to work, we need to fix the width of the p tag, which I do by either measuring the math expression width and making use of CSS calculate, or in the final example I'm using javascript to find the width automatically.

The final example uses a ZeroWidthSpace to place a line break in a desired position - it can also be used in the KaTeX-only approach.

Here is what I'm talking about: https://bourne2learn.com/math/katex/wrapping-text.php

It works fine on a phone.

Hope it helps Murray

Hey thank you for sharing, I really like what you have on your website. How did you exactly get it to work that way.

I still have trouble getting this to work.

I have the following styles:

.katex {
  line-height: 1.2;
  white-space: normal;
  text-indent: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  word-break: break-all;
  max-width: 100%;
}

.katex-display > .katex {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  text-align: initial;
}

$\textbf{Step 2: Evaluating the answer choices} \\$
$$
\begin{aligned}
- & \text{Choice A: Less than half of all teenagers enjoy reading.} \\
  & \text{This conclusion is speculative and not directly supported by the data.} \\
  & \text{The survey only measures the frequency of reading books, not whether teenagers enjoy reading.} \\[8pt]
- & \text{Choice B: The average number of books read by teenagers each month is one.} \\
  & \text{The survey does not provide information about the total number of books read.} \\
  & \text{It only states whether students read at least one book per month.} \\
  & \text{Thus, this conclusion is unsupported.} \\[8pt]
- & \text{Choice C: Approximately } 40\% \text{ of all high school students read at least one book per month.} \\
  & \text{The survey result can reasonably be generalized to the broader population of high school students.} \\
  & \text{This assumes the sample is representative.} \\
  & \text{Thus, this conclusion aligns well with the data.} \\[8pt]
- & \text{Choice D: Exactly } 40\% \text{ of all teenagers read more than one book per month.} \\
  & \text{This conclusion is overly specific and incorrect.} \\
  & \text{The survey only states that } 40\% \text{ read at least one book.} \\
  & \text{It does not specify how many read more than one.}
\end{aligned}
$$

For the latex above, I have a horizontal scroll for the aligned text, which I would like to avoid. For \textbf, this does not even actually have a scroll and simply gets cut off.

Do you have any suggestions for change to get this working like yours?

Hello @kyusungpark

KaTeX replaces each white space in \text elements with  , so no amount of CSS will force it to wrap nicely.

My first attempt was to replace those   back to an ordinary space and I messed around with the CSS to get it to wrap, but it ended up looking like this:

It's a mess because several of the spans have fixed heights (via KaTeX processing) and it would have been too painful (and not at all flexible for other situations) to find and remove all those fixed height elements.

The best thing (which applies generally when using a library like KaTeX) is to use plain HTML for text, and only use KaTeX for math.

So I converted your example to HTML (using <ul>s), and I only use KaTeX for the "40%" that occurs in your text (following your example of doing that part as processed math. In fact, it could be plain HTML as well here.) I added it to this page:

https://bourne2learn.com/math/katex/wrapping-text.php (you may need to refresh the page to see the update)

It looks like LaTeX output because of the KaTeX font I'm using via the class = 'katex' on the DIV containing your quiz text.

I'm guessing your output is from some tool (Python, maybe?) that's giving you LaTeX. If possible, get it to output plain HTML like I've done on my page. If not, you'd need to process your output using javascript to convert it to HTML before processing the whole page with KaTeX. Depending on the complexity, that could be painful (and slow). It would be quicker to write it in HTML in the first place.

So in conclusion, any text is best handled using HTML, and only use KaTeX for math.

Regards Murray

Oh wow, thank you for going above and beyond! Yeah, after looking around for a while, it looks pretty hard to render in a format I would like it to be. The biggest problem I have is when latex is too long I have to scroll horizontally to view the whole text. I will follow your approach and wrap things around class=katex and I just decided to just break up long equations.

Thank you for the help, really appreciate it!