html字体溢出问题,CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题；

于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新帖子发现在ie下多了两个猪，至于解决的方法有很多种，发出来大家讨论下造成这种问题的原理怎么解释？

代码如下：

运行代码框

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:200px;

}

再谈猪的问题

两猪两猪两猪

↑上面就是多出的猪两个

再谈猪的问题

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

在ie6,7下会多出两个猪，在ff下是正常的；

根据怿飞前面的帖子所讲，肯定是浮动造成的问题，只不过这个浮动与怿飞的浮动布局不同，所以多了一个猪；那如果用怿飞帖子中的方法也是可以解决的；

1.用添加
的方法

运行代码框

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:200px;

}

再谈猪的问题

两猪两猪两猪

↑上面就是多出的猪两个

再谈猪的问题

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

2.清楚浮动的方法，(这点可以说明是浮动引起的错误)

运行代码框

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:200px;

}

再谈猪的问题

两猪两猪两猪

↑上面就是多出的猪两个

再谈猪的问题

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

3.在文字外面再套用

运行代码框

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled

font-family:"宋体";

}

.test{

display:block;

float: left;

margin-right:2px;

}

.main{width:200px;

}

再谈猪的问题

两猪两猪两猪

↑上面就是多出的猪两个

再谈猪的问题

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

html字体溢出问题,CSS教程:关于文字溢出问题的研究相关推荐

CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号
CSS 如何实现文字溢出隐藏时,隐藏左边或者右边,并显示省略号指定一个定宽高的盒子,当文字溢出,会换行显示出来. .box {width: 60px;height: 30px;background- ...
html字体位置向上,css怎么移动文字,html字体位置
css怎么移动文字CSS怎么手机短信,Css实现移动文本的方法:1.在block元素容器中,可以使用"text-align: center,left,right"来移动文本的位置: ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
html字体悬浮效果,CSS 3.0文字悬停跳动特效代码
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0文字悬停跳动特效 * { margin: 0; padding: 0; } b ...
css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
html如何实现字体重叠,div css每行文字显示一半同时文字字体重叠显示不全解决方法...
CSS DIV机关中泛起单行或多行笔墨的每行笔墨内容不克不及体现全,上上行笔墨有一点点堆叠景象,笔墨字体只闪现一半经管门径,在低版本IE分外明显笔墨字体表示不全,在google涉猎器等高版本IE阅读器 ...
PHP字体间距设置,CSS如何设置文字间距？
css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问.本章就给大家介绍css设置文字间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一.css word- ...
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下. 这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DI ...
css多行文字溢出隐藏为三个点(...)
对于单行文本很简单 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 将这三行代码加到css中就ok了,white-spa ...

html字体溢出问题,CSS教程:关于文字溢出问题的研究

html字体溢出问题,CSS教程:关于文字溢出问题的研究相关推荐

最新文章

热门文章