html – 是否可以进行文本溢出：仅使用css选择省略号？

概述是否有可能使文本溢出：省略号;选择？在divit很简单.当字符串太长时有点,我需要选择相同的.我知道,js是可能的,但我想得到“轻”的css决定： .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px; font: 是否有可能使文本溢出：省略号;选择？在divit很简单.当字符串太长时有点,我需要选择相同的.我知道,Js是可能的,但我想得到“轻”的CSS决定：

.select {  Box-sizing: border-Box;  display: block;  wIDth: 200px;  height: 34.5px;  padding: 5px 22px 3px 11px;  Font: 400 16px/24px sans-serif;  color: #464a4c;  vertical-align: mIDdle;  background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0ims4wIiBlbmNvZgluZz0IDXrmlTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bgluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bgluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+Cg==) no-repeat right 6px top 13px;  border: 1px solID #D6D6D6;  border-radius: 0;  -moz-appearance: none;  -webkit-appearance: none;  overflow: hIDden;  white-space: nowrap;  text-overflow: ellipsis}

<select >  <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="2">2 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="3">3 Mississippi Mississippi Mississippi Mississippi Mississippi</option></select><br><div >div Mississippi Mississippi Mississippi Mississippi Mississippi</div>

解决方法 不是最干净的解决方案,但你总是可以“欺骗”它,将选择包装在一个div中,然后使用：在伪元素之后定位一个假…在选择隐藏下面的内容：

.select {  Box-sizing: border-Box;  display: block;  wIDth: 200px;  height: 34.5px;  padding: 5px 22px 3px 11px;  Font: 400 16px/24px sans-serif;  color: #464a4c;  vertical-align: mIDdle;  background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0ims4wIiBlbmNvZgluZz0IDXrmlTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bgluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bgluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+Cg==) no-repeat right 6px top 13px;  border: 1px solID #D6D6D6;  border-radius: 0;  -moz-appearance: none;  -webkit-appearance: none;  position:relative;}div {  position:relative;  display:inline-block;}div:after {      content: '...';    display: block;    background-color: #fff;    height: 15px;    wIDth: 25px;    color: #464a4c;    position: absolute;    right: 23px;    bottom: 11px;    text-align: center;    pointer-events: none;}

<div><select >  <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="2">2 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="3">3 Mississippi Mississippi Mississippi Mississippi Mississippi</option></select></div>

我还添加了指针事件：无;对于元素,所以即使你点击它,它仍然会打开下面的选择.

总结

以上是内存溢出为你收集整理的html – 是否可以进行文本溢出：仅使用css选择省略号？全部内容，希望文章能够帮你解决html – 是否可以进行文本溢出：仅使用css选择省略号？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。