Wrap button text with CSS?

Panel
3

As @marcbernot said the word-break property does not work in a button if it’s used alone. But adding the white-space property in the css seems to do the job.

import panel as pn

css = '''
.test button{
      white-space: normal !important;
      word-break:break-all;
      width:200px
      }
      
.test .bk-btn-group{
    display: inline-block;
}
'''
pn.extension(raw_css=[css])
pn.widgets.Button(name='Test'*100,css_classes=['test']).show()

In this example the display: inline-block on the bk-btn-group allows the height to change dynamically.
With this solution if you want to change the height or the width of your button, you may do it in the css.

3 Likes