當文本長度超出之後 overflow-x: auto 屬性自動産生橫向滾動條
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHLyMGRNl3Z650MNpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL2QDOzEDO1QTM1IjMxgTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
<template>
<div class="content-container">
<title-bar titleName="案例詳情">
<template slot="tool">
<span class="tool">
<el-button @click="back" class="el-button-reset">傳回</el-button>
<el-button @click="deleteData" class="el-button-reset">删除</el-button>
<el-button type="primary" @click="editCase" class="el-button-reset">修改</el-button>
</span>
</template>
</title-bar>
<div class="content-list">
<div class="content-list-headline" >
<p>{{details.title}}</p>
<div style="margin-top: 30px;">
<span >{{details.appName}}</span><span>{{details.updateDate}}</span>
</div>
</div>
<div >
<img class="imag-class" id="logoImg" @click="openPhotoSwipe(0, [logo], 'logoImg')" v-show="logo" :src="logo">
</div>
<div class="content-list-details">
<div class="content-list-details-word" v-html="details.contentHtml">
</div>
</div>
</div>
</div>
</template>
<script>
import vuePhotoSwipe from '@/components/photoSwiper';
import apiCase from '@/api/appCaseApi';
import { remoteScript } from '@/utils/index';
import titleBar from './basic/TitleBar';
import Global from '../../../../../global';
export default {
components: {
titleBar,
},
name: 'FormBlock',
data() {
return {
exampleId: '',
logo: '',
details: {
exampleId: '',
articleId: '',
title: '',
type: '',
appId: '',
appZone: '',
appKind: '',
appName: '',
specialId: '',
specialName: '',
contentHtml: '',
status: '',
articleLogo: '',
logoFileId: '',
updateDate: '',
},
};
},
methods: {
editCase() {
this.$router.push({
name: 'updateCase',
query: {
id: this.exampleId,
},
});
},
getCaseDetailByExampleId(id) {
apiCase.getCaseDetailByExampleId({
params: {
params: {
exampleId: id,
},
},
}).then((data) => {
this.details = data.data;
// 初始化圖檔
if (this.details.imgIds) {
this.logo = `${Global.FSCTX}/api/fs/view/${this.details.imgIds}`;
}
this.$nextTick(() => {
this.loadRemoteScript();
});
});
},
deleteData() {
this.$confirm('确認删除本條案例詳情?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.delData(this.exampleId);
}).catch(() => {});
},
delData(id) {
const ids = [];
ids.push(id);
apiCase.delCaseData({
params: {
data: ids,
},
}).then((data) => {
if (data.state === 0) {
this.$message({
message: '删除案例成功',
type: 'success',
});
setTimeout(() => this.$router.go(-1), 1000);
}
}).catch((err) => {
this.$message({
message: err.response.message,
type: 'error',
});
});
},
back() {
this.$router.go(-1);
},
// 點選檢視大圖
openPhotoSwipe(index = 0, fids, id) {
const list = [];
const clientWidth = document.documentElement.clientWidth;
fids.forEach((fid) => {
// 計算圖檔的長寬比,以免圖檔放大後變形
const w = document.querySelector(`img#${id}`).naturalWidth;
const h = document.querySelector(`img#${id}`).naturalHeight;
const rate = w / h;
const wt = clientWidth - 10;
const wh = wt / rate;
list.push({
src: `${fid}`,
w: wt || clientWidth,
h: wh || clientWidth,
});
});
vuePhotoSwipe.open(index, list, {
bgOpacity: 0.75,
closeOnScroll: false, // 滾動關閉
errorMsg: '<div class="pswp__error-msg">圖檔加載失敗</div>',
});
},
// 加載富文本有序無序清單格式标簽
loadRemoteScript() {
const url = `${Global.ueditorPath}ueditor.parse.js`;
remoteScript(url, 'ueditorOUlScript').then(() => {
uParse('.content-list-details-word', {
liiconpath: `${Global.ueditorPath}themes/ueditor-list/`,
});
});
},
},
mounted() {
this.exampleId = this.$route.query.exampleId;
this.getCaseDetailByExampleId(this.exampleId);
},
};
</script>
<style scoped>
.imag-class {
width: 178px;
height: 180px;
display: block;
&:hover{
cursor: pointer;
}
}
.content-container {
padding: 0 20px;
background: #fff;
}
.content-row {
overflow: hidden;
}
.content-list {
margin-left: 20px;
margin-right: 20px;
&-headline{
overflow: hidden;
p {
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
font-size: 20px;
color: #1F2D3D;
letter-spacing: 0;
line-height: 20px;
margin-top: 30px;
margin-bottom: 14px;
}
span {
font-family: MicrosoftYaHei;
font-size: 14px;
color: #909399;
letter-spacing: 0;
line-height: 14px;
margin-bottom: 20px;
display: block;
float: left;
margin-right: 40px;
}
}
&-details {
&-word {
font-family: MicrosoftYaHei;
font-size: 14px;
color: #1F2D3D;
letter-spacing: 0;
}
img {
width: 268px;
height: 180px;
margin-top: 8px;
margin-bottom: 8px;
}
}
}
</style>
<style >
.content-list-details{
margin-top: 20px;
}
.content-list-details-word{
margin: 0;
white-space: initial;
overflow-x: auto;
li{
list-style: inherit;
}
p{
margin: 5px 0;
clear: both;
overflow: hidden;
}
img{
width: 268px;
max-height: 300px;
}
}
</style>