Скрытие лишнего текста в выпадающем списке - PullRequest
Новая
       15

Скрытие лишнего текста в выпадающем списке

0 голосов
/ 13 июня 2019

Я делаю пользовательский выпадающий список, и когда у меня длинный текст в списке, он отображается поверх моего значка выпадающего меню. Вот как это выглядит с коротким текстом:

enter image description here

и здесь с длинным текстом:

enter image description here

Как скрыть дополнительный текст, когда он приближается к значку?проверить песочницу на полный код: 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;
`;

Ответы [ 5 ]

1 голос
/ 13 июня 2019

Скопируйте эти стили 

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;

`;

0 голосов
/ 13 июня 2019

Попробуйте, вы можете настроить пространство, просто добавив отступ в поле выбора 

.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>
0 голосов
/ 13 июня 2019

вы можете попробовать это 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;
`;
0 голосов
/ 13 июня 2019

После того, как я проверил с сайта, есть один обходной путь с этим: 

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; 
';
0 голосов
/ 13 июня 2019

Добавить эти свойства: 

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

И чтобы быть идеальным, вам нужно добавить фиксированную ширину к тексту, который у вас есть в DropdownDisplayUI. Затем вы можете добавить немного отступа относительно ширины иконки или отобразить все как position: relative и сделать его display: flex; justify-content: space-between: align-items: center;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...