`
太阳神喻
  • 浏览: 106743 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

css控制自动换行,防止表格或div等被撑破

    博客分类:
  • css
阅读更多

style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

语法:
word-break : normal | break-all | keep-all

参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

语法:
word-wrap : normal | break-word

参数:
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生

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

语法:
table-layout : auto | fixed

参数:
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

说明:
设置或检索表格的布局算法。
-------------------------------------------------
以上只能解决IE的问题,这里Firefox中我们使用JS插入的方法来解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!-- 
div {
  width:300px;
  word-wrap:break-word;
  border:1px solid red;
  }
-->
</style>


<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;  
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";  
strContent=strContent.substr(intLen,strContent.length);  
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord(37)
</script>

 

分享到:
评论

相关推荐

    CSS 文字自动换行

    ### CSS文字自动换行 #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器...

    html中表格td内容自动换行

    今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `white-space: nowrap;` 可以实现强制不换行。但是,如果我们为 TD 指定了宽度,并且文字中无标点、...

    css自动换行 防止撑破div影响排版

    总结来说,通过合理使用CSS中的`white-space`、`word-wrap`、`word-break`以及`overflow`属性,可以有效地解决连续英文字符和数字导致的自动换行问题,防止内容撑破容器,保持页面布局的整洁和一致性。对于不同...

    css表格单元格中的长文本如何实现自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...

    jsp页面Table自动换行

    在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的默认样式`white-space`是`normal`,这意味着元素内的文本会在适当的地方自动...

    css之自动换行.docx

    本篇文章将深入探讨如何使用CSS来控制文本的换行,尤其是对于div、p这样的块级元素以及表格中的文本。 首先,块级元素如div和p,默认情况下,它们会占据一整行并根据内容自动换行。在HTML和CSS中,这些元素通常具有...

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

    对于`div`的嵌套情况,如果希望内层`div`的内容能根据内容自动换行,只需在外层`div`设置宽度和`white-space: nowrap`,内层`div`则会根据内容自动调整。 **word-break 和 word-wrap 属性的区别:** - `word-break:...

    css控制文字自动换行的实现方法

    对于表格(`&lt;table&gt;`)元素,同样可以通过CSS控制其内部文字的自动换行。在IE浏览器中,可以使用`table-layout:fixed;`属性来强制表格的宽度,同时隐藏超出指定宽度的多余内容。而Firefox浏览器则需要在`&lt;td&gt;`和`...

    对于div,p等块级元素css如何实现自动换行

    在网页设计和开发过程中,我们经常会遇到需要处理内容自动换行的情况,尤其是在块级元素如div、p等元素中的文本内容超过了设定的宽度后,自动换行的处理就显得尤为重要。本文将详细探讨如何通过CSS来实现块级元素...

    css之自动换行实现代码

    首先,对于常见的块级元素如`div`和`p`,正常文字的换行是通过CSS属性`white-space`来控制的,默认值为`normal`,这保证了当元素宽度被定义之后,文本会自动换行。例如: ```css #wrap { white-space: normal; ...

    CSS对表格单元格强制换行和不换行

    CSS控制Table单元格强制换行与强制不换行  我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。  近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...

    CSS 网页内容换行控制

    其中,文本的换行管理是CSS中不可或缺的一部分,尤其是在DivCSS布局中,良好的换行控制可以使得网页内容更加整洁、易读。本文将系统地介绍CSS中用于控制换行的四种主要属性:`white-space`、`word-break`、`word-...

    css强制换行 css强制不换行的css方法

    在本文中,将讨论CSS中的换行控制技术,特别是如何使用CSS强制实现文本换行或阻止换行。这在网页设计和布局过程中非常重要,尤其是在处理表格、列表或其他需要精确控制文本流动的元素时。 首先,了解`word-break`...

    html 自动换行

    - `word-wrap: break-word`同样是CSS的一个属性值,用于控制文本的自动换行行为。 - 当容器宽度不足以容纳整个单词时,这个属性会让整个单词移到下一行显示,而不是将其拆分成两部分。 - 这种方法更符合人们的...

    css实现连续的英文或数字自动换行的方法

    连续的英文或数字在网页排版中很容易造成布局问题,因为它们默认不会在空格处换行,导致容器被撑大,无法适应容器的宽度。为了解决这个问题,CSS提供了一些控制文本换行的属性。通过这些属性,可以实现连续的英文或...

    gridview一般换行,强制换行

    3. **自定义模板列**:对于更复杂的情况,如特定字段需要换行,可以创建自定义模板列,然后在模板中插入适当的HTML元素(如`&lt;p&gt;`或`&lt;div&gt;`),并通过CSS控制其换行行为。 4. **调整列宽**:有时候,问题可能出在...

    CSS 之强制换行技巧

    CSS强制换行技巧主要解决的是当容器中出现连续的英文或数字时,由于它们不会自动换行,可能会导致容器被撑大而超出预期布局的问题。在CSS中,有多种方法可以实现强制换行,特别是在不同浏览器环境下,需要使用不同的...

Global site tag (gtag.js) - Google Analytics