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

Question

我有一个场景，在标题上我必须在标题右上角显示一个按钮。选定的过滤器值应显示在过滤器按钮旁边，如下所示。 |在 2018 年 1 月 23 日至 2018 年 7 月 30 日之间{按钮}|

当用户更改屏幕大小时，我需要在文本中添加省略号，并且按钮应按原样显示。 |在 2018 年 1 月 23 日至 07 月 3 日之间... {按钮}|

我无法使用以下 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 }