把还能记起来的,记录下,方便后续使用
如下是常见的情景
情景一:
一行文字“内”夹杂了一些小的icon图标,图标在单行文字头、尾的,方法(通用):
当图标在单行“内”时,伪类就不好用了,头、尾用伪类还行或者使用padding-left或padding-right来使用背景,
html:
<label>情景一:单行文字内部有小图标</label>
<p class="text">我的是文字,<i class="icon"></i>中间是图片</p>
<label>情景二:单行文字头、尾有小图标</label>
<p class="text"><i class="icon"></i>我的是文字,中间是图片</p>
<label>情景二:单行文字头、尾有小图标</label>
<p class="text">我的是文字,中间是图片<i class="icon"></i></p>
<label>情景三:单行文字头、尾有小图标</label>
<p class="PseudoText">我的是文字,中间是图片</p>
<label>情景四:多行文字</label>
<p class="mtext text multiline textarea">我的是文字,<i class="icon"></i>中间是图片我的是文字,中间是图片我的是文字,中间是图片我的是文字,<i class="icon"></i>中间是图片</p>
css:
*{
margin: 0;
padding: 0;
}
.multiline.mtext.textarea{
width: 200px;
height: auto;
background: lightblue;
white-space: normal;
}
.text, .PseudoText{
width: 230px;
height: 30px;
line-height: 30px;
text-indent: 10px;
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
background: lightblue;
}
.text .icon{
width: 20px;
height: 19px;
vertical-align: middle;
margin-top: -4px;
display: inline-block;
background: url("images/testbg.jpg") no-repeat -50px -30px #db7078;
}
/*------如下是伪类的使用----*/
.PseudoText{
position: relative;
}
.PseudoText:after, .PseudoText:before{
position: absolute;
top: 50%;
margin-top: -10px;
content: "";
height: 20px;
width: 20px;
background: url("images/testbg.jpg") no-repeat -50px -30px #db7078;
}
.PseudoText:after{
right: 10px;
}
.PseudoText:before{
left: 10px;
}
情景二
省略号的使用,
单行文本省略号,多行文本省略号
多行文本,个人觉得使用js控制或者,做个透明的png加在后面用上面的方法,
html:
<p class="singleLineTxt JTextField">这是单行文本这是单行文本这是单行文本这是单行文本</p>
css:
*{
margin: 0;
padding: 0;
}
.singleLineTxt{
width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}