wrap text in ui.markdown?

[kj4tmp]

Question

Is it possible to force ui.markdown to wrap text when inside a fixed width container?

[falkoschindler]

Hi @kj4tmp,

Have you tried it? ui.markdown wraps by default:

with ui.card().classes('w-40'):
    ui.markdown('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')

[kj4tmp]

on nicegui v1.4.18 I am obtaining the following:

from

from textwrap import dedent

from nicegui import ui

with ui.card().classes('w-40'):
    ui.markdown(dedent(
        """
        ? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
        """))

with ui.card().classes('w-40'):
    ui.markdown(dedent(
        """
        ? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
        ```yaml
        my_yaml_property: How do i make the code block wrap? AAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        ```
        """))

ui.run()

[kj4tmp]

also on nicegui v1.4.25

[kj4tmp]

looks like the wrapping behavior changes depending on if a code block is in the markdown?

[kj4tmp]

So i guess I have two questions:

1. Why doesnt it wrap when there is a code block in the markdown?
2. Can I wrap code blocks? (This might be antithetical to what a code block is?)

[falkoschindler]

1. The wide code block lets the markdown element grow, so that the first line "? AAA..." doesn't need to wrap. Counterexample with a short line of code which lets the first line wrap:

   with ui.card().classes('w-40'):
       ui.markdown(dedent(
           """
           ? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
           ```py
           print('Hello, World!')
           ```
           """))

   

2. There are two aspects:

   • If one line doesn't wrap because of a huge word like "AAA...", the markdown element still shouldn't overflow its container. This can be achieved adding "w-full" to the markdown element.
   • Furthermore we need to allow the code lines to wrap, which isn't the default. You can add some custom CSS setting the "text-wrap" property.

   ui.add_css('''
   .nicegui-markdown code span {
       text-wrap: wrap;
   }
   ''')
   
   with ui.card().classes('w-40'):
       ui.markdown(dedent(
           """
           ? AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.
           ```py
           print('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
           ```
           """))