Question

我有一个方案，在标题上，我必须在标题的右上角显示一个按钮。选定的过滤器值应显示在过滤器按钮旁边，如下所示。 |在01/23/2018至07/30/2018 {button} |

当用户更改屏幕尺寸时，我需要在文本中添加省略号，并且按钮应按原样显示。 |在01/23/2018和07/3之间... {button} |

我无法通过以下CSS实现此目标：

:local{
  .smallIcon {
    height: 1em;
    width: 1em;
  }
  .textOverflow {
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
}

代码如下：

import Header from 'terra-clinical-header';
import styles from './style.scss';
import Text from 'terra-text';
import Button from 'terra-button';
import IconFunnel from 'terra-icon/lib/icon/IconFunnel';

const newHeader = (props) => {
  const filterText = "Between 01/23/2018 and 07/30/2018,"
  return (
       <Header
          isSubheader
          title={<Text className={styles.textOverflow} color="black" fontSize={12} weight={400}>{filterText}</Text>}
          endContent={
            <Button
              isIconOnly
              icon={<IconFunnel className={styles.smallIcon} />}
              variant="action"
              type="button"
            />
          }
        />);
}

使用上述样式，我可以省略号，但文本将显示在左侧。

Answer 1

将max-width设置为您的.textOverflow类，这将解决您的问题：）

.textOverflow { max-width: 260px }

使用省略号和按钮将文本右对齐（react-js）

1 个答案: