html – 是否可以进行文本溢出:仅使用css选择省略号?
发布时间:2020-12-14 23:29:26 所属栏目:资源 来源:网络整理
导读:是否有可能使文本溢出:省略号;选择?在divit很简单.当字符串太长时有点,我需要选择相同的.我知道,js是可能的,但我想得到“轻”的css决定: .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px;
是否有可能使文本溢出:省略号;选择?在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 class="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 class="select">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 class="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> 我还添加了指针事件:无;对于元素,所以即使你点击它,它仍然会打开下面的选择. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |