why my webpages can't break line in Iphone browser?
This is my website for mobiles to visit : m.looa.com
If you got an Iphone,please visit it and you will find that the words don't break line .
This only happens in Iphone's browser, it looks fine for android and almost all browsers for PC,including IE Chrome FireFox and even Safari(you can try that).
I know this must have something to do with CSS but I can't figure out where the problem lies .
Below is the code from my webpage,please pay attention to the class : middigest,I think that probably is where the problem lies(I have delete some code to make it more clear):
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='theme/mobile/img/style.css' type='text/css' media='all' />
</head>
<body onload='setPage(160)'>
<div class='allbox'>
<dl class='alltop'>
<dt class='w2' onclick="window.location.href='http://m.looa.com/g_m_city'"><a>北京</a></dt>
<dd><a href='http://m.looa.com/mobile'><img src='theme/mobile/img/looa_logo.png'/></a></dd>
<dt class='w3' onclick="window.location.href='http://m.looa.com/g_m_cang'"><a>收藏夹</a></dt>
</dl>
<dl class='topmid'>
<dt><img src='theme/mobile/img/looa_nearby_s.gif' /></dt>
<dd onclick= 'getCityDis()'><a> <img src='theme/mobile/img/looa_dis.gif'/></a></dd>
</dl>
<div class='midbox' id='midbox'>
<dl class='midmenu'>
<dt>距离<strong> 0.0km</strong></dt>
<dd>商家<strong> 纯视觉摄影工作室</strong></dd>
</dl>
<div class='middigest'>
<a href='http://m.looa.com/g_m_detail?deal_id=6921'>性感翘臀，迷人水腰，诱人S曲线，这一站就是你</a> <----------- this line
</div>
<dl class='midpic'>
<dt><a href='http://m.looa.com/g_m_detail?deal_id=6921'><img width='175px' height='129px' src='http://www.looa.com/theme/tuan/outsite_deal_img/201010/1287700044_small.jpg'/></a></dt>
<dd>
<ul>
<li>现价</li>
<li style='margin-bottom:6px;'><span><strong class='numfont'>3</strong>元</span></li>
<li>原价 264元</li>
<li>购买 1人</li>
<li>网站 <a href='#' onclick='gotoOutSite("http://www.groupon.cn/html/product/FS/FS4446.html")'>团宝网</a></li>
<li>剩余 6天9小时</li>
</ul>
</dd>
</dl>
<dl class='midbot'>
<dt><a href='http://m.looa.com/m_map?deal_id=6921'><img src='theme/mobile/img/looa_map.gif' /></a></dt>
<dt><img id='cangbtn6921' src='theme/mobile/img/looa_no_cang.gif' onclick="toggleDealCangState('cang',6921,60)" /></dt>
<dt><img src='theme/mobile/img/no_phone.gif' /> </dt>
</dl>
</div>
************* Repeat开发者_高级运维 *****************
</div>
</body>
</html>
and the CSS related is :
.middigest {word-break:normal;float:left;width:98%;line-height:17px;font-weight:bold;padding:6px 0 8px 0;clear:both;margin:0 1%;}
also,if you want to see the whole CSS,please go to http://m.looa.com/theme/mobile/img/style.css
Anyone of you has the experience of web developing for Iphone ? Give me a hand please.
Thanks so much !!!
I don't have an iphone so I can't test it but did you try those CSS properties?
- White-space
- Word-wrap
- Overflow: hidden
加载中,请稍侯......
精彩评论