问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在网页上实现两行文字省略并跟随动态块状内容（CSS/JS）?

头像
yuki
    93722

    image.png

    如图所示，动态内容为一个icon， 在不同文案长度下的展示状态

    问题：如何使用兼容性较好的css 或者加少量 js 失效这个效果？

    目前只发现 antd-mobile 有个比较复杂的组件可以借鉴 Ellipsis 组件

    css3csshtml前端html5
    阅读 2.6k
    avatarAI BotBETA

    要实现这种效果，你需要一个CSS样式来确保文本在达到最大行数后省略，并且使用相对定位或Flexbox来确保动态内容（如icon）始终在文本的右侧。这里有一个使用CSS实现的基本示例，它不需要JavaScript，但考虑到了兼容性。

    首先，HTML结构可能如下：

    <div class="text-container">
  <p class="text-ellipsis">这是一段可能会很长的文本，当文本长度超过一定限制时，它应该显示省略号...</p>
  <div class="dynamic-content">
    <!-- 这里是你的icon或其他动态内容 -->
    <i class="fas fa-icon"></i>
  </div>
</div>

    然后，CSS样式如下：

    .text-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 文本和动态内容之间有间隔 */
  /* 你可能需要为容器设置宽度，以限制文本宽度 */
  width: 100%; /* 或其他具体值 */
}

.text-ellipsis {
  /* 使用伪元素创建省略效果 */
  position: relative;
  line-height: 1.5; /* 根据你的需求调整行高 */
  max-height: 3em; /* 根据你希望的最大行数调整，这里是2行 * 1.5行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  -webkit-box-orient: vertical;
}

.dynamic-content {
  /* 根据你的icon或动态内容调整宽度和高度 */
  width: 30px;
  height: 30px;
  /* 确保内容在文本右侧 */
  margin-left: auto;
}

/* 针对IE和其他不支持-webkit-line-clamp的浏览器，你可能需要回退方案 */
/* 但请注意，IE并不支持CSS的`text-overflow: ellipsis`与多行文本 */

    注意：

    • -webkit-line-clamp属性是一个非标准的WebKit属性，它在Chrome, Safari和Opera中得到了支持，但在Firefox中不被支持。对于不支持此属性的浏览器，你可能需要提供一个回退样式或使用JavaScript库（如Clamp.js）来实现相同的效果。
    • 为了让text-overflow: ellipsis在多行文本上生效，你需要使用display: -webkit-box;和-webkit-box-orient: vertical;。
    • 你需要确保.text-container有一个明确的宽度，这样文本才能知道何时应该开始省略。
    • .dynamic-content的margin-left: auto;确保了它始终位于文本的右侧。
    • 对于IE浏览器，你可能需要寻找一个JavaScript解决方案或完全避免多行省略效果。
    4 个回答
    得票最新
    头像
    XboxYan
      18.2k93790
      ✓ 已被采纳
      头像
      along
        3.1k1531
        头像
        WillisYe
          1.2k1614
          头像
          jsoncode
            4k115990
            .text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /*行数*/ 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题