我尝试查看show modal窗口.该窗口包含多个范围.但是宽度和高度都有限制.当span内容小于span宽度时：一切正常,我可以看到这个图标.
但是当文字很大时,我看不到这个图标.我没有任何想法,如何在不使用Javascript(jQuery)的情况下在纯CSS上执行此操作.
HTML：
<div class="wrapper">
<span class="first">First</span>
<br/>
<span class="second">Second contain a lot of text. Really long span is here</span>
</div>
CSS：
.wrapper{
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span{
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover{
border: 1px solid blue;
cursor: pointer;
}
span:hover::after{
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
第一个屏幕,第一个跨度：没关系
第二个屏幕,第二个跨度：这不正常
第三个屏幕,第二个跨度：所以必须
有什么想法吗？填充,边距必须“用户友好”,两种情况都相同.
在这里试试：
解决方法
.wrapper {
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span {
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover {
border: 1px solid blue;
cursor: pointer;
}
span:hover::before {
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="wrapper"> <span class="first">First</span> <br/> <span class="second">Second contain a lot of text. Really long span is here</span> </div>
