解決列表某項文字過度過多 需要自適應撐開高度展示 其他項目按照行高居中

以下代碼可直接復制：
兩種方法：分別是方法1：bfc配合浮動撐高 其他項目子絕父相 方法二：第一項也是相對定位（不推薦）

<template><div class="far_box"><ul><li v-for="item in arr" :key="item.id"><span class="s1">{{ item.name }}</span><span class="s2">{{ item.age }}</span><span class="s3">操作</span></li></ul></div> </template><script> export default {data () {return {arr: [{ id: 1, name: '自己家的味道金額為搭配我陪of額歐朋foeofo違法未of額威鋒網頗爾我我呃呃哦哦哦頗爾第五批東阿王', age: 10 },{ id: 2, name: '自己家的味道金額為搭配我陪of額歐朋foeofo違法未qwewqewqoeowq哦哦我哦群毆我看偶爾為空餓哦千萬可開啟王鵬空氣我看of額威鋒網頗爾我我呃呃哦哦哦頗爾第五批東阿王', age: 7 },{ id: 3, name: '自己家的味道', age: 111111112 }]}} } </script><style lang="less" scoped> .far_box {ul {width: 500px;border: 1px solid #1fff;li {overflow: hidden; //設置bfc 可以解決 s1浮動時候 撐起高度 這樣s1和s2才能在一定高度下居中position: relative;border-bottom: 1px solid #ccc;span {display: inline-block;}.s1 {width: 50%;word-break: break-all;float: left; //配合bfc撐起高度 --- 如果這里不寫fl和上方的overflow 也可直接使用方法2：相對定位relative撐高及位移（既下方注釋） 但不建議方法2// position: relative;// left: -30%;}.s2 {width: 20%;position: absolute;left: 55%;top: 50%;transform: translate(0, -50%);}.s3 {width: 10%;position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}}li:last-child {border-bottom: none;}} } </style>

總結

以上是生活随笔為你收集整理的解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。