需求:
要求时间不换行
代码使用:
<Tooltip
placement="bottom"
title={
<div>
{showActualWaitTime && (
<div>
{$i18n.get(
{
id: 'jiuzhou.BatchesInOrder.BatchPanelHeader.ActualBusinessObservationTimeActualwaittime',
dm: '业务实际观察时间:{actualWaitTime}',
},
{ actualWaitTime: actualWaitTime },
)}
</div>
)}
......
>
<span>
{$i18n.get({
id: 'jiuzhou.BatchesInOrder.BatchPanelHeader.ObservationTime',
dm: '观察时间:',
})}
<span style={{ marginLeft: '4px' }}>
{
// 实际时间
showActualWaitTime ? `${actualWaitTime} / ` : `_ /`
}
{
// 设置时间
configuredWaitTime
}
</span>
</span>
</Tooltip>
起初在<Tooltip 这边添加类名className={styles.watchTime}>,在style.less文件中修改宽度:
<Tooltip className={styles.watchTime}>
### style.less ###
.watchTime {
max-width: 500px;
}
发现不起作用,然后修改.ant-tooltip的属性也不生效,接着百度其需要修改的宽度是.ant-tooltip-inner的宽度,发现还是不生效。最后查到,这个组件添加类名需要用overlayClassName字段才行
<Tooltip overlayClassName={styles.watchTime}>
这样就成功了!