how to add css style to katex html

Question

I'm using katex for math symbol in my html. The elements overflow form the parent div, When I'm adding style to the container div, overflow: hidden to parent div those elements not shown at all, it is possible to limit the size of the element? thanks.

Answer 1

What effect do you expect from limiting the size of the container?

As far as I know, KaTeX doesn't support wrapping. (In part that's because KaTeX doesn't worry much about horizontal widths. It does vertical positioning but horizontal width was left to the browser to sort out. Or at least that was the case last I worked on it, there might have been changes motivated by constructs such as underbrace.)

I guess a more reasonable thing to do would be to scale down the math till it fits the desired width. KaTeX doesn't support that either, but there should be ready to use solutions for that or there somewhere.

If you know the setup where your formula will be shown, then wrapping it manually usually gives the best results. Humans are good at finding places where wrapping makes sense, and at seeing alignment to help the reader.

Answer 2

I've faced this situation and found that you can edit the katex.min.css in order to adjust the font or use your own fonts. Note that you usually ignore node_modules (if you are working with npm)

Heres is the official guide by Katex.