Question

所以我有一个项目列表，我想在文本短的时候在左边放标签文本，在右边放一个对勾图标，但是当我添加textOverflow属性时，该图标就被其余文本隐藏了： here is my list

const allTags = (
  <Popover
    style={{ width: "auto" }}
    id="popover-basic"
    title={
      <h6
        style={{
          textAlign: "center",
          fontFamily: "verdana",
          color: "#8f9091",
          fontStyle: "bold",
          margin: "8px"
        }}
      >
        Créer une etiquette
      </h6>
    }
  >
    <div>
      {this.state.allTagsList.map((tag, i) => {
        return (
          <div>
            <div style={{ display: "inline" }}>
              <Button
                className="btn btn-lg btn-fill"
                style={{
                  width: "210px",
                  maxWidth: "300px",
                  border: "none",
                  backgroundColor: tag.color,
                  fontStyle: "bold",
                  cursor: "pointer",
                  padding: "10px",
                  marginBottom: "3px",
                  paddingRight: "80px",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  textAlign: "left"
                }}
                onClick={e => {
                  console.log("dd");
                }}
              >
                <span>{tag.text}</span>
                <span className="fas fa-check" />
              </Button>
            </div>
            <div style={{ display: "inline" }}>
              <Button
                className="btn btn-circle-micro"
                style={{
                  borderRadius: "30px",
                  border: "none",
                  width: "25px",
                  height: "25px",
                  textAlign: "center",
                  padding: "1px 0",
                  marginRight: "2px",
                  marginTop: "8px"
                }}
              >
                <i
                  className="fas fa-pen"
                  style={{ pointerEvents: "none", transform: "scale(1,1)" }}
                />
              </Button>
            </div>
          </div>
        );
      })}
    </div>
  </Popover>
);

Answer 1

您可以通过这种方式使用flexbox：

.wrapper{
  width: 100px;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
}

.text{
  flex-basis: 80%;
  background-color: red;
  overflow: hidden;
}

.icon{
flex-basis 20%;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: yellow;
}

<div class="wrapper">
  <div class="text">
  Halloooooooooooooo
  </div>
  <div class="icon">
  </div>
</div>

Answer 2

您可以执行类似的操作。

 const allTags=(
          <Popover style={{width:"auto"}} id="popover-basic" title={<h6 style={{textAlign:"center",fontFamily:"verdana",color:"#8f9091",fontStyle:"bold",margin:"8px"}}>
          Créer une etiquette
          </h6>}>
          <div>
          {this.state.allTagsList.map((tag,i)=>{
            return <div>
            <div style={{display:"inline"}}><Button id="Button1" className="btn btn-lg btn-fill"  onClick={(e)=>{console.log("dd")}}>
            <span id="Test">{tag.text}</span>
            <span className="fas fa-check"/>
            </Button>
            </div>
            <div style={{display:"inline"}}>
            <Button className="btn btn-circle-micro" style={{borderRadius: "30px",border:"none", width:"25px",height:"25px",textAlign:"center",padding: "1px 0",marginRight : '2px',marginTop:"8px"}}
            >
            <i className="fas fa-pen" style={{pointerEvents:"none",transform:"scale(1,1)"}}/></Button>
            </div>
            </div>
          })}
          </div>
          </Popover>
        );

Css：

  #Button1 {
       width:"210px",
            maxWidth:"300px";border:"none";
            backgroundColor:tag.color;fontStyle:"bold";
            cursor:"pointer";padding:"10px",marginBottom:"3px";
            paddingRight:"80px";overflow: "hidden";textAlign:"left";

    }
#Test{
  textOverflow:"ellipsis";
}

您可以共享您键入的代码吗？

Answer 3

之所以发生这种情况，是因为您的图标是被隐藏的文本的一部分。

您实际上可以将图标添加为伪元素，它可以根据需要工作。

以下是一个示例：https://codepen.io/anon/pen/zQdOGm

如何在左侧放置按钮标签，在右侧放置图标？

3 个答案: