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

Question

我有一个场景，在 header 上我必须在 header 右角显示一个按钮。所选过滤器值应显示在过滤器按钮旁边，如下所示。 |在 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 class，这将解决您的问题:)

.textOverflow { max-width: 260px }

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

align a text to right with ellipsis and button (react-js)

html

css

reactjs

ellipsis