使用 CSS 在 Select 中隐藏长文本

Question

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

代码：

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;
}

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

当您运行时，您会看到 Where it is Most Needed 的片段被截断。我宁愿它切断而不是覆盖箭头。如果它可以淡出（也许有渐变？），那就太好了。

如何实现？

Answer 1

这是一种方法。

向 select 元素添加一些右填充，例如 30px，并设置一个 width 值，比如 200px。

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

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

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;
}

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

Answer 2

这只是一个技巧。增加右填充并将图像背景位置更改为百分比。

希望对您有所帮助！

select {
    padding-right: 15px !important;
    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: 112% 50%;
    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;
}

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

使用 CSS 在 Select 中隐藏长文本

Hide long text within Select using CSS

html

css

html-select