Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：fix 手机竖屏 日志超出宽度 不显示

Browse Source 
【原  因】：css样式导致
【过  程】：display: inline-block;并设置一个最大宽度 超出省略号代替
【影  响】：
This commit is contained in:
tk 2024-07-24 20:02:42 +08:00
parent 0f0558c049
commit e316d1a153
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/layout/components/BlogBox.vue
View File

@ -2,10 +2,10 @@
<div class="fixed-bottom p-l-5" :class="maxWidth"> <div class="fixed-bottom p-l-5" :class="maxWidth">
<el-button @click="handleOpenBlog" class="l p-3" type="text" size="mini" icon="iconfont icon-chuangkoufangda" <el-button @click="handleOpenBlog" class="l p-3" type="text" size="mini" icon="iconfont icon-chuangkoufangda"
circle></el-button> circle></el-button>
<div class="l p-l-10" v-if="newLog"> <div class="l p-l-10 flex" v-if="newLog">
<span class="l m-t-5 m-r-5 logDot" :style="{ background: newLog.color }"></span> <span class="l m-t-5 m-r-5 logDot" :style="{ background: newLog.color }"></span>
<span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span> <span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
<span class="m-l-10">{{ newLog.content }}</span> <span class="content m-l-10">{{ newLog.content }}</span>
</div> </div>
<el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%"> <el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
<template slot="title"> <template slot="title">
@ -99,4 +99,15 @@ export default {
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.timestamp,
.content {
display: inline-block;
/* 确保元素可以应用宽度 */
max-width: 60vw;
/* 根据需要设置宽度 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style> </style>