Question

我有一个选择框，其中有一些文本溢出。它看起来并不太好，我想找到一种方法，使用CSS来解决问题。

代码：

＆＃13;

select {
    height: 2.4375rem;
    padding: 0.5rem;
    border: 1px solid #cacaca;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-family: inherit;
    line-height: normal;
    color: #0a0a0a;
    background-color: #fefefe;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2851, 51, 51%29"></polygon></svg>');
    background-size: 9px 6px;
    background-position: right center;
    background-origin: content-box;
    background-repeat: no-repeat;
  
  /* Not in my code but added for demo to simulate select in a small container: */
    max-width:130px;
}

＆＃13;

<select>
  <option value="">-- Please select --</option>
  <option value="34380969">Rescue </option>
  <option value="34380970">Education </option>
  <option value="34380971">Health &amp; Genetics </option>
  <option value="34380972">Endowment </option>
  <option selected value="34380973">Where it is Most Needed</option>
</select>

＆＃13;

当您运行代码段时，您会看到Where it is Most Needed已被截止。我宁愿它截止而不是覆盖箭头。如果它可以消失（可能有渐变？），那就太好了。

我如何实现这一目标？

Answer 1

这是一种方法。

向select元素添加一些正确的填充，例如30px，并设置width值，例如200px。

然后，调整背景位置，使水平偏移为宽度减去填充，170px。

您可以调整数字以获得所需的样式。

＆＃13;

select {
  height: 2.4375rem;
  padding: 0.5rem;
  padding-right: 30px;
  border: 1px solid #cacaca;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-family: inherit;
  line-height: normal;
  color: #0a0a0a;
  background-color: #fefefe;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2851, 51, 51%29"></polygon></svg>');
  background-size: 9px 6px;
  background-position: 170px center;
  background-origin: content-box;
  background-repeat: no-repeat;
  /* Not in my code but added for demo to simulate select in a small container: */
  width: 200px;
}

＆＃13;

<select>
  <option value="">-- Please select --</option>
  <option value="34380969">Rescue</option>
  <option value="34380970">Education</option>
  <option value="34380971">Health &amp; Genetics</option>
  <option value="34380972">Endowment</option>
  <option selected value="34380973">Where it is Most Needed</option>
</select>

＆＃13;

Answer 2

这只是一个黑客攻击。增加右边距并将图像背景位置更改为百分比。

希望这个帮助！

＆＃13;

angular2/platform/browser

＆＃13;

angular2/core

＆＃13;

使用CSS在Select中隐藏长文本

2 个答案: