使小图标的位置位于文本的右中间处

最新推荐文章于 2023-03-16 19:32:30 发布

木木芳草

最新推荐文章于 2023-03-16 19:32:30 发布

阅读量138

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44817180/article/details/119917138

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了在CSS中如何使用`fit-content`属性优化布局，特别是在IE浏览器的兼容性问题上提出了解决方案。通过设置`-webkit-box-orient`和`-webkit-line-clamp`实现多行文本省略，同时详细描述了图标定位和背景图片的使用方法。

摘要由CSDN通过智能技术生成

<p class="pClass">dataTest111111111111
 <span class="iconClass" >
 </span>
 </p>

注：如果在pClass中使用width：fit-content，可以去掉float：left，但在IE浏览器中不能使用fit-content。

.pClass{
  position: relative;
  float: left;
  padding-right: 25px;
    overflow: hidden;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    word-break: break-all;
    //超出文本时2行显示省略号（IE失效）
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.iconClass{
  position: absolute;
  top: calc(50% -  11px);
  right: 0;
  width: 22px;
  height: 22px;
  font-size: 16px;
  background: url('src/assets/images/icon_phone_book.svg') no-repeat center/22px
    22px;
}