如何调整dbc Checklist图标与文本间距并实现文本换行对齐？

问题分析 #

你当前代码里用html.Div包裹标签文本并设置display:inline，搭配Checklist的display:flex布局，易导致文本错位；同时未限制标签容器宽度，使得内容溢出到图表区域。

修改方案 #

1. 调整标签文本容器样式：用html.Span替代html.Div（或给Div设置white-space: normal、display: inline-block），确保文本可自动换行，且与图标保持水平对齐。
2. 合理设置间距与布局：在labelStyle里通过padding-left拉开图标与文本的距离，给Checklist添加flex-wrap: wrap避免横向溢出，限制容器宽度防止和图表重叠。
3. 优化侧边栏布局：确保侧边栏内容不超出容器范围。

修改后的完整代码 #

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=True)

values = ['orange', 'black', 'purple', 'red', 'brown', 'yellow']
options = []

for i in values: 
    # 用Span包裹文本，设置内边距和自动换行
    options.append({
        'label': html.Span(i, style={
            'font-size': 15, 
            'color':'white', 
            "padding-left":"0.5rem",
            'white-space': 'normal',
            'display': 'inline-block'
        }), 
        'value': i
    })


cat_filter_box = html.Div(children=[
    html.Div(children=[

        html.Label('Nav Bar', style = {'color':'white'}),
        dcc.Checklist(
            options = options,
            value = values,
            # 设置标签的外边距和内边距，确保图标文本间距
            labelStyle = {
                "margin":"0.5rem 0",
                'display': 'flex',
                'align-items': 'center',  # 确保图标和文本垂直居中对齐
                'width': '100%'  # 占满侧边栏宽度，触发文本换行
            }, 
            style = {
                'display': 'flex',
                'flex-direction': 'column',  # 垂直排列选项，避免横向拥挤
                'flex-wrap': 'wrap',
                'width': '100%'  # 限制宽度，防止溢出到图表区域
            },
        ),

    ], className = "vstack gap-1 h-50",
    style = {'padding':'2rem'}
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(cat_filter_box, className = "bg-secondary h-100"), width = 2),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ]),
        ], width = 5),
    ])
], fluid = True)


if __name__ == '__main__':
    app.run_server(debug=True, port=8052)

关键修改说明 #

• 图标与文本间距：通过label里的padding-left直接给文本添加左侧内边距，拉开和图标的距离，无需复杂布局。
• 水平对齐与换行：给文本容器设置display: inline-block和white-space: normal，同时在labelStyle里添加align-items: center确保图标和文本垂直居中，width:100%让文本在侧边栏宽度内自动换行。
• 避免内容溢出：给Checklist设置width:100%和flex-direction: column，让选项垂直排列，不会横向溢出到右侧图表区域。

内容的提问来源于stack exchange，提问作者Chopin