DIV中文字不换行解决办法

简介:

101505216.jpg

解决办法如下:

word-wrap : normal | break-word

设置或检索当当前行超过指定容器的边界时是否断开转行。


normal:
控制连续文本换行。
break-word:
内容将在边界内换行。如果需要,词内换行(word-break)也会发生。
overflow 属性规定当内容溢出元素框时发生的事情。
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
 
  
  1. <styletype="text/css">

  2. div{

  3.    width:100px;

  4.    height:100px;

  5.    border:1px solid #f00;

  6.    word-wrap:break-word;

  7.    overflow:hidden;

  8. }

  9. </style>

  10. <div>

  11.    ssssssssssssssssssssssssssssssssss

  12. </div>



102311398.jpg



2013-07-26新增:

如果上面的DIV中各文字之间加入<span>标签,好像就不起作用了(还是不自动换行)。


解决办法:

1
2
3
4
.link_middle span{
     display:-moz-inline-box;
     display:inline-block;
}



经测试 兼容各种版本浏览器


      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1124442,如需转载请自行联系原作者







相关文章
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1577 0
|
9月前
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
66 0
|
5月前
div 文字溢出文字自动隐藏显示
div 文字溢出文字自动隐藏显示
|
6月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
121 0
|
8月前
|
前端开发
css 实现标签内容多行截取(...)数字换行--英文--文字处理
css 实现标签内容多行截取(...)数字换行--英文--文字处理
UI文字换行的三种方法
UI文字换行的三种方法
267 0
|
移动开发 前端开发 HTML5
web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置
web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置
web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置
html+css实战11-换行和水平线标签
html+css实战11-换行和水平线标签
166 0
html+css实战11-换行和水平线标签
|
开发者
换行和div span标签|学习笔记
快速学习换行和div span标签
136 0
换行和div span标签|学习笔记
|
前端开发
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们不仅需要运用到css3的新属性 text-overflow ,该属性的作用就是设置一下被隐藏文本的展示形式(例如隐藏文本用……展示),除此之外还需要用到属性 white-space 使文字不换行,以及使用属性 overflow:hidden 隐藏多余的文字 接下来我们就来分步讲解一下这几个属性的应用吧
270 0
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容