解決列表某項(xiàng)文字過(guò)度過(guò)多 需要自適應(yīng)撐開(kāi)高度展示 其他項(xiàng)目按照行高居中

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

<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額威鋒網(wǎng)頗爾我我呃呃哦哦哦頗爾第五批東阿王', age: 10 },{ id: 2, name: '自己家的味道金額為搭配我陪of額歐朋foeofo違法未qwewqewqoeowq哦哦我哦群毆我看偶爾為空餓哦千萬(wàn)可開(kāi)啟王鵬空氣我看of額威鋒網(wǎng)頗爾我我呃呃哦哦哦頗爾第五批東阿王', age: 7 },{ id: 3, name: '自己家的味道', age: 111111112 }]}} } </script><style lang="less" scoped> .far_box {ul {width: 500px;border: 1px solid #1fff;li {overflow: hidden; //設(shè)置bfc 可以解決 s1浮動(dòng)時(shí)候 撐起高度 這樣s1和s2才能在一定高度下居中position: relative;border-bottom: 1px solid #ccc;span {display: inline-block;}.s1 {width: 50%;word-break: break-all;float: left; //配合bfc撐起高度 --- 如果這里不寫(xiě)fl和上方的overflow 也可直接使用方法2：相對(duì)定位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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。