有时候使用一些css往往能达到意想不到的效果

最近需要在页面上显示读取的文本内容，中英文混杂着，我把它们统统抛到div中div设置了宽度，效果是相当糟糕，左对齐，右端长短不一，有的超出长度，有的不够长度

不能接受啊，设置css超长了自动换行overflow-wrap:break-word;，然并卵，又是兼容问题，加一个word-wrap:break-word;

有效果了，乖乖的在框里了，但是还是看到了明显的参差不齐，找了好久，都不知道怎么描述这个问题，加个word-break:break-all;，一切ok了

总结：div容器换行使用“word-break:break-all“或”overflow-wrap:break-word;word-wrap:break-word;“，一个会截断英文单词一个会另起一行

div容器内文本对齐--神奇的css的更多相关文章

  1. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  2. html中的div、td 、p 等容器内强制换行和不换行的实现

    div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...

  3. CSS文本对齐text-align详解

    1.语法 text-align具体参数如下: 语法:text-align : left | right | center | justify 说明:设定元素内文本的水平对齐方式. 参数:left :  ...

  4. 实现DIV层内的文字垂直居中(转)

    有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用 ...

  5. 转载网页博客：ie7bug:div容器下的img与div存在间隙

    1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...

  6. css文本超出部分省略号&CSS强制换行总结

    word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...

  7. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  8. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  9. 行内元素对齐：display:inline-block;

    行内元素对齐:display:inline-block; 今天见到一个一行元素水平排列,但是对不齐啊,如图: 代码: div{ border: 1px solid red; } .wrap > ...

随机推荐

  1. 第二百七十七天 how can I 坚持

    开玩笑要有个度,哎,或许这就是缘分,很容易受别人影响吗? 中国人为什么会经常抱怨,不抱怨,挺好. 睡觉,红颜祸水,老婆是要能一起 生活的,不是失去,是上天在帮我,哈哈.

  2. 转】Nginx+tomcat集群环境搭建（Windows下）

    原博文出自于:    http://blog.csdn.net/clj198606061111/article/details/22621003       感谢! 实验环境 windows xp s ...

  3. 单节点伪分布集群（weekend110）的Hive子项目启动顺序

    因为,我的mysql是用root用户,在/home/hadoop/app/目录下,创建的. 第一步:开启mysql服务 第二步:启动hive [hadoop@weekend110 app]$ su r ...

  4. Hadoop Hive概念学习系列之为什么Hive里，要用mysql？（四）

    想说的是,hive只是个工具,包括它的数据分析,依赖于mapreduce,它的数据管理,依赖于外部系统. metastore_db,是在哪目录下运行,在哪里产生数据. 由此可见,你在哪路径下,执行hi ...

  5. 利用phantomjs模拟QQ自动登录

    之前为了抓取兴趣部落里的数据,研究了下QQ自动登录. 当时搜索了一番,发现大部分方法都已经失效了,于是准备自己开搞. 第一个想到的就是参考网上已有方案的做法,梳理登陆js的实现,通过其他语言重写.考虑 ...

  6. struts2+Hibernate4+spring3+EasyUI环境搭建之五:引入jquery easyui

    1.下载jquery easyui组件     http://www.jeasyui.com/download/index.php 2.解压 放到工程中  如图 3.jsp引入组件:必须按照如下顺序 ...

  7. My97DatePicker的calendar.js的反混淆

    eval(string)函数 <script> eval(function(p, a, c, k, e, d) { p = 'function p(){console.log(" ...

  8. Flask框架获取用户IP地址的方法

    本文实例讲述了python使用Flask框架获取用户IP地址的方法.分享给大家供大家参考.具体如下: 下面的代码包含了html页面和python代码,非常详细,如果你正使用Flask,也可以学习一下最 ...

  9. 201. Segment Tree Build

    最后更新 二刷 08-Jan-2017 一刷忘了什么时候做的,只是觉得这几个题挺好的,一步一步手动构建线段树,最终理解了这个数据结构,并且后面有利用的地方. 其实重要的3个东西题目已经提供了: 1) ...

  10. c++出错记录

    错误1如下:  vector<vector<int>> m_vc;  error: '&' cannot appear in a constant-expression ...