如何使用CSS在下拉列表按钮的右侧添加箭头

Question

我正在开发聚合物下拉列表。目前我的CSS有问题。

在这里你可以找到例子：

jsfiddle example

<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end
</div>
<div class="arrow">&#x25BC;</div>
</div>
</div>

我需要创建以下下拉列表，但是我的按钮右侧有箭头可见问题。

问题是，如何实现这个目标：

gif example

我将非常感谢你的帮助!!!!

Answer 1

你需要使用它

text-overflow: ellipsis;
overflow: hidden;

然后你会看到列表项后面的三个点，但你还需要为你的width添加span

width: 100px

代码示例

<div style="width:200px" class="button initial gray">
  <div style="padding-left:12px;padding-right:12px;">
    <div class="button-value truncated" style="width:158px; display: inline-block">
      Select value very long label with dots at the end
    </div>
    <div style="display: inline-block;margin-top: 12px;vertical-align: top;"class="arrow">&#x25BC;</div>
  </div>
</div>

Answer 2

     div.button.orange {
        border: 1px solid #FF6200;
        background: inherit;
        background-color: #FF6200;
        border-radius: 5px;
        box-shadow: none;
        font-family: 'ING Me';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: white;
        cursor: pointer;
        height: 36px;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px lightgray;
      }

      div.button.gray {
        border: 1px solid #767676;
        background: inherit;
        background-color: white;
        border-radius: 5px;
        box-shadow: none;
        font-family: 'ING Me';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #FF6200;
        cursor: pointer;
        height: 36px;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px lightgray;
        position:relative;
        
      }

      div.button.gray.initial {
        color: #767676;
      }

      div.button.active {
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #FF6200;
      }

      div.button-value {
        text-align: center;
        line-height: 36px;
        width: inherit;
      }

      ul.options>li {
        padding-left: 12px;
        padding-right: 12px;
        line-height: 36px;
      }

      .truncated {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      ul.options {
        color: black;
        list-style-image: none;
        list-style: none;
        list-style-type: none;
        border-radius: 0px 0px 4px 4px;
        box-sizing: border-box;
        position: absolute;
        width: auto;
        margin: -1px;
        padding: 0;
        list-style: none;
        border: 1px solid #FF6200;
        border-top: none;
        background-color: white;
        box-shadow: 1px 1px 5px lightgray;
      }

      ul.options>ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
      }

      ul.options>li:hover {
        color: white;
        background-color: #FF6200;
        text-decoration: underline;
      }
      
      .arrow{
        position:absolute;
        right:4px;
        top:0;
        line-height:36px;
        }
      

<div style="width:200px" class="button initial gray">
  <div style="padding-left:12px;padding-right:18px;">
    <div class="button-value truncated" style="width:inherit;">
      Select value very long label with dots at the end&#x25BC;
    </div>
    <div class="arrow">&#x25BC;</div>
  </div>
</div>