div隐藏超宽字有关问题
日期：2014-05-16 浏览次数：20528 次
div隐藏超宽字问题
这段代码只在IE不正常，ff chrome opera 遨游3显示正常.
想达到的目的：隐藏div内过长的文字，并把a连接放在div底部
问题代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<style type="text/css">
#aaa{
height: 100px;
width: 100px;
overflow: hidden;
white-space:nowrap;
-o-text-overflow: clip;
background:#eff8fe;
}
#aaa a{position:relative;top:65px;
}
</style>
<div id="aaa" >
<a href="dd.htm">div隐藏超宽字，不换行，不显示省略号</a>
</div>
代码运行结果：
1、如果只取消<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
结果正常显示，并沉底。
2、如果只取消position:relative;
结果：超宽字可以隐藏，但a在div顶部，不符合要求。
想知道：
1、如果不加这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
对页面运行、兼容性有没用影响？
2、如果一定要保留 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句#aaa a{position:relative;top:55px;
改修改？要把a沉到div靠近底部的位置
谢谢
------解决方案--------------------
这段代码只在IE不正常，ff chrome opera 遨游3显示正常.
想达到的目的：隐藏div内过长的文字，并把a连接放在div底部
问题代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<style type="text/css">
#aaa{
height: 100px;
width: 100px;
overflow: hidden;
white-space:nowrap;
-o-text-overflow: clip;
background:#eff8fe;
}
#aaa a{position:relative;top:65px;
}
</style>
<div id="aaa" >
<a href="dd.htm">div隐藏超宽字，不换行，不显示省略号</a>
</div>
代码运行结果：
1、如果只取消<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
结果正常显示，并沉底。
2、如果只取消position:relative;
结果：超宽字可以隐藏，但a在div顶部，不符合要求。
想知道：
1、如果不加这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
对页面运行、兼容性有没用影响？
2、如果一定要保留 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句#aaa a{position:relative;top:55px;
改修改？要把a沉到div靠近底部的位置
谢谢
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<style type="text/css">
#aaa{
height: 100px;
width: 100px;
background:#eff8fe;
}
#aaa a{position:relative;top:65px;display:inline-block;height:14px;line-height:14px;overflow:hidden;font-size:12px;
}
</style>
<div id="aaa" >
<a href="dd.htm">div隐藏超宽字，不换行，不显示省略号</a>
</div>
------解决方案--------------------
-o-text-overflow
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
