美文网首页
Vue2.0全家桶项目踩的坑(二)

Vue2.0全家桶项目踩的坑(二)

作者: Darsoon | 来源:发表于2017-09-12 22:06 被阅读0次

在项目中有一处需要保证输入数据的格式,所以使用了<pre>标签,但随之又引来了一个问题,即因为保持输入格式,所以文字超过了界限。

pre文字自动换行

<pre>标签可以用来存储代码以及其他需要保证输入格式一致的数据,但有时候内容过长就会超过边界或者把外框撑开,这就带来了新的问题。如果使用overflow:hidden,那内容就会丢失,这不符合要求
点击去看

使用word-wrap: break-wordwhite-space:pre-wrap

word-wrap这个属性还是比较陌生的,用来说明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象
而还有一个属性word-break 可以去这里看区别

pre选择器上加上word-wrap: break-wordwhite-space:pre-wrap两条声明
点击去看

相关文章

  • Vue2.0全家桶项目踩的坑(二)

    在项目中有一处需要保证输入数据的格式,所以使用了 标签,但随之又引来了一个问题,即因为保持输入格式,所以文字超过了...

  • Vue2.0全家桶项目踩的坑(一)

    最近在学习了Vue2.0的全家桶之后,决定做一个实际的小项目来巩固和加深对Vue的理解,然后看到网上太多的点餐平台...

  • 基于Vue2.0仿lofter移动端Demo

    一个仿lofte手机端的vue项目 项目描述 技术栈 Vue2.0全家桶 + axios + Vuex + Min...

  • vue全家桶+element 项目踩坑总结

    项目简介 vue + axios + vue-router + vuex + ElementUI 架构 vue v...

  • 高仿饿了么app项目

    在制作项目的时候踩的坑 1、vue2.0不支持挂载 2、stylus与stylus-loader安装版本为最新版 ...

  • Vue 2.0 开发流程 (全)

    该文章用 vue2.0 全家桶详细的介绍了一个项目的整个流程新手可以跟着做一遍有不对的地方请指出, 谢谢本项目以 ...

  • vue2.0全家桶项目实用代码片段

    前言:好久不更博客了。已经从angularjs转移到了vue的阵营。最近上线了一个vue的项目,在此分享一些简单实...

  • 基于Vue+express的博客项目

    一个前端基于Vue2.0全家桶,后端基于Express+Mongodb的前后端分离博客。前端界面使用了flexbo...

  • Vue2.0踩坑

    Tips 1.命名规范: 一是不使用非法的标签字符;二是不与 HTML 元素(区分大小写)或 SVG 元素(不区分...

  • Vue2.0全家桶腾讯课堂(移动端)

    Vue2.0全家桶实战腾讯课堂(移动端),不当之处还请大家指正(持续更新中)。 效果预览 ?在线预览:点我!!!在...

网友评论

      本文标题:Vue2.0全家桶项目踩的坑(二)

      本文链接:https://www.haomeiwen.com/subject/ebuhsxtx.html