在自定义下拉菜单中隐藏额外的文本答案

【问题标题】：Hiding extra text in custom dropdown在自定义下拉菜单中隐藏额外的文本
【发布时间】：2019-10-27 22:41:44
【问题描述】：

我正在制作自定义下拉菜单，当列表中有长文本时，它会越过我的下拉图标。这就是短文本的外观：

这里是长文本：

靠近图标时如何隐藏多余的文字？检查沙箱以获取完整代码：https://codesandbox.io/s/recursing-cloud-c6oxc

const DropdownDisplayUI = styled.div`
  color: #3d4671;
  position: relative;
  background: #dbeaf4;
  width: 140px;
  height: 35px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 2px;
  font: 15px/19px Source Sans Pro;
  margin-top: 5px;
  padding: 8px 7px 8px 10px;
`;

【问题讨论】：

标签： html css reactjs styled-components

【解决方案1】：

添加这些属性：

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

为了完美，您需要为DropdownDisplayUI 中的文本添加固定宽度。然后你可以添加一些关于图标宽度的填充或全部显示为position: relative并使其成为display: flex; justify-content: space-between: align-items: center;

【讨论】：

不起作用。您在codesandbox.io/s/recursing-cloud-c6oxc 中检查了吗？
是的，我确实尝试过，降低DropdownDisplayUI 宽度或让您的文本更长以查看结果

【解决方案2】：

复制这些样式

const DropdownDisplayUI = styled.div`
  color: #3d4671;
  position: relative;
  background: #dbeaf4;
  width: 125px;
  height: 35px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 2px;
  font: 15px/19px Source Sans Pro;
  margin-top: 5px;
  padding: 8px 7px 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

`;

【讨论】：

不起作用。您在codesandbox.io/s/recursing-cloud-c6oxc 中检查了吗？
只需添加一条规则即可。添加word-break:break-all

【解决方案3】：

在我从网站上查看后，有一种解决方法：

const DropdownDisplayUI = styled.div`
      color: #3d4671;
      position: relative;
      background: #dbeaf4;
      width: 140px;
      height: 35px;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 2px;
      font: 15px/19px Source Sans Pro;
      margin-top: 5px;
      padding: 8px 25px 10px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break:break-all;
      line-height:25px; 
';

【讨论】：

【解决方案4】：

你可以试试这个word-break & text-overflow 属性。它会工作

const DropdownDisplayUI = styled.div`
      color: #3d4671;
      position: relative;
      background: #dbeaf4;
      width: 140px;
      height: 35px;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 2px;
      font: 15px/19px Source Sans Pro;
      margin-top: 5px;
      padding: 8px 25px 10px 10px;
      overflow: hidden;
      white-space: nowrap;
/*add the below two properties. It will work*/
      text-overflow: ellipsis;
      word-break:break-all;
`;

【讨论】：

【解决方案5】：

试试这个，你可以通过在选择框内添加填充来调整空间

.first select{
  padding: 5px 0px 5px 65px!important;
}
.second select {
    padding: 9px 0px 5px 0px;
}
.third select {
    padding: 5px 40px 5px 5px;
}
label{
  color:red;
  margin-bottom:20px;
}
label:after,label:before{
  text-align:center;
  content="***";
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<p >for better view use full screeen mode</p>
  <div class="row mt-5">
  
    <div class="col-4">
      <div class="first">
        <label>starting more space</label>
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
    <div class="col-4">
       <label>starting equal space</label>
      <div class="second">
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
    <div class="col-4">
      <label>starting equal space</label>
      <div class="third">
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：

对于您的情况，只需添加填充：8px 30px 8px 10px;就是这样:)