vue中移动端字数过多造成布局混乱

qq_50031016

于 2021-06-11 09:48:01 发布

阅读量641

点赞数

分类专栏：前端文章标签： vue.js bootstrap 前端

本文链接：https://blog.youkuaiyun.com/qq_50031016/article/details/117805425

版权

在Vue项目中，使用bootstrapvue遇到移动端布局问题。当字数过多时，导致页面显示混乱。解决方案是针对移动端，通过CSS样式实现超出文本隐藏并显示省略号，保持布局整洁。主要使用了overflow: hidden, text-overflow: ellipsis, -webkit-line-clamp等CSS属性进行处理。" 108625251,10023930,华为测试老兵的实战心得,"['软件测试', '测试工程师', '黑盒测试', '单元测试', 'python']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，解决页面用列表显示时，pc端正常显示，移动端布局混
现在我做的是如果移动端字数过多时，超出不行的不显示，用三个点…来代替

二，我用的vue+bootstrapvue，但是只要是vue脚手架项目都可以用

//namepc-true的话是pc端，所以？后面的pc就是pc端，phone就是移动端
 <b-card-text md="4" :class="namepc==true?'pc':'phone'">{
   {
   data.name}}<

最低0.47元/天解锁文章