有时候使用一些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. linux@64 获取时间的性能评估

    听人说gettimeofday 在64bit下有缓存,速度很快,测试下了,感觉不对啊.. #include <time.h> #include <sys/time.h> #in ...

  2. 【转】从零开始,让你的框架支持CocoaPods

    首先概括一个大概的步骤: 代码上传到Github 创建podspec文件 在Github上创建release版本 注册CocoaPods账号 上传代码到CocoaPods 检验是否上传成功 更新框架版 ...

  3. BAT-使用BAT生成快捷方式

    @( echo [InternetShortcut] echo URL=C:\Windows\System32\calc.exe echo IconIndex=0 echo IconFile=C:\W ...

  4. C语言break语句

    break语句不能用于循环语句和switch语句之外的任何其他语句中: breakh中断switch break如果用于循环,是用来终止循环:break如果用于switch,则是用于终止switch. ...

  5. POJ3126 Prime Path

    http://poj.org/problem?id=3126 题目大意:给两个数四位数m, n, m的位数各个位改变一位0 —— 9使得改变后的数为素数, 问经过多少次变化使其等于n 如: 10331 ...

  6. UVa 1629 Cake slicing (记忆化搜索)

    题意:一个矩形蛋糕上有好多个樱桃,现在要做的就是切割最少的距离,切出矩形形状的小蛋糕,让每个蛋糕上都有一个樱桃,问最少切割距离是多少. 析:很容易知道是记忆化搜索,我们用dp[u][d][l][r]来 ...

  7. MAT(2)安装Memory Analyzer

    http://www.eclipse.org/mat/ 两大功能: 1.find memory leaks 2.reduce memory consumption 安装步骤: 1. 打开 eclips ...

  8. ajax 源生,jquery封装 例子 相同哈哈

    http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22 ajax使用回调函数的例子(原生代码和jquery代码) 一. ajax代码存在的问 ...

  9. java的BigDecimal

    java的BigDecimal 一般设计到高精度的加法或乘法或者阶乘的求和积都会用到BigDecimal这个类. import java.util.*;import java.math.BigDeci ...

  10. 浅谈TCP优化

    原文地址:http://kb.cnblogs.com/page/197406/ 很多人常常对TCP优化有一种雾里看花的感觉,实际上只要理解了TCP的运行方式就能掀开它的神秘面纱.Ilya Grigor ...