Wrap button text with CSS?

Panel
1

Is there a way to wrap button text with css?

import panel as pn
pn.extension()
pn.widgets.Button(name='Test'*100, height=500)

To use up the space

image
image921×739 6.14 KB

2

I managed to constrain the width of the button only by changing the css width argument.

import panel as pn

css = '''
button.bk.bk-btn:not(bk-active)
{
  border-radius:55px;
  background-color:green;
  width:200px;
  text-align:left;
  word-break: break-word;
  height:500px;
}
'''
pn.extension(raw_css=[css])
pn.widgets.Button(name='Test'*100)

However the word-break property does not work. By reading about this issue, I guess it is not possible for now.

1 Like
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