Question

我要进行自定义下拉菜单，当列表中有长文本时，它会超过我的下拉图标。这就是短文本的外观：

以及此处的长文字：

当靠近图标时如何隐藏多余的文本？检查沙箱中的完整代码：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;
`;

Answer 1

复制这些样式

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;

`;

Answer 2

添加这些属性：

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

为达到最佳效果，您需要为DropdownDisplayUI中的文本添加固定宽度。然后，您可以在图标宽度的右侧添加空白，或将其全部显示为position: relative，并将其设置为display: flex; justify-content: space-between: align-items: center;

Answer 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; 
';

Answer 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;
`;

Answer 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>

在自定义下拉菜单中隐藏其他文本

5 个答案: