标题:新手上路,问一个小问题,怎么实现文字超过固定宽度自动换行?
只看楼主
萌小佳
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2016-6-18
结帖率:0
已结贴  问题点数:20 回复次数:1 
新手上路,问一个小问题,怎么实现文字超过固定宽度自动换行?
我的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box
        {
           
            width: 298px;
           
            border-top:2px solid #206f96;
        }
        #box1
        {
            border:1px solid #cfcfcf;
            border-top:none;
        }
      
        a:link
        {
            display:inline-block;
            color:#252525;
            text-decoration:none;   
            
       }
        #header
        {
            border-bottom:1px solid #cfcfcf;
            font:14px "宋体";
            padding:7px 231px 8px 9px;
            font-weight:bold;
            background:url(style3.png)
        }
        #content
        {
            font:12px "宋体";
            word-spacing:4px;
            padding:25px 22px 20px 50px;
            background:url(style4.png) no-repeat 16px 25px;
            overflow:hidden;
            word-wrap:break-word;
        }
        #con1
        {
            font:12px/25px "宋体";
            word-spacing:4px;
            padding:12.5px 4px 13.5px 50px;
            background:url(style5.png) no-repeat 9px 51px #f7f7f7;
            word-wrap:break-word;
            word-break:break-all;
        }
        #con2
        {
            font:12px/25px "宋体";
            word-spacing: 4px;
            padding:12.5px 17px 13.5px 50px;
            background:url(style6.png) no-repeat 15px 25px;
            white-space:normal;
                    }
        #con3
        {
            font:12px/25px "宋体";
            word-spacing:4px;
            padding:12.5px 16px 14.5px 50px;
            background:url(style7.png) no-repeat 12px 49px #f7f7f7;
        }
      
    </style>
</head>
<body>
<div id="box">
    <div id="box1">
    <div id="header">网易产品</div>
    <div id="content"><a href="#">免费邮箱</a> <a href="#">VIP邮箱</a> <a href="#">企业邮</a> <a href="#">邮箱大师</a> <a href="#">易信</a></div>
    <div id="con1"><a href="#">梦幻西游2</a> <a href="#">新大话2</a> <a href="#">新大话3</a> <a href="#">藏地传奇</a> <a href="#">魔兽世界</a> <a href="#">星际争霸Ⅱ</a> <a href="#">倩女幽魂2</a> <a href="#">武魂2</a> <a href="#">天下3</a> <a href="#">突击英雄</a> <a href="#">新飞飞</a> <a href="#">大唐无双零</a> <a href="#">天谕</a> <a href="#">英雄三国</a> <a href="#">龙剑</a> <a href="#">乱斗西游</a> <a href="#">炉石传说</a> <a href="#">UU加速</a></div>
    <div id="con2"><a href="#">考拉海购</a> <a href="#">LOFTER</a> <a href="#">博客</a> <a href="#">相册</a> <a href="#">花田交友</a> <a href="#">约会</a> <a href="#">女神</a> <a href="#">跟帖</a> <a href="#">抢购</a> <a href="#">CC语音</a> <a href="#">BoBo直播</a></div>
    <div id="con3"><a href="#">彩票</a> <a href="#">理财</a> <a href="#">商城</a> <a href="#">贵金属</a> <a href="#">电影票</a> <a href="#">车险</a> <a href="#">有道词典</a> <a href="#">翻译</a> <a href="#">云笔记</a> <a href="#">印象派</a> <a href="#">公开课</a> <a href="#">云课堂</a> <a href="#">读小说</a> <a href="#">云音乐</a> <a href="#">火车票</a> <a href="#">游戏助手</a> <a href="#">公正邮</a> <a href="#">应用</a> <a href="#">杂志</a> <a href="#">新闻客户端</a> <a href="#">大学慕课</a></div>
    </div>
</div>
</body>
</html>
搜索更多相关主题的帖子: 新手上路 display border color style 
2016-06-18 20:07
dwhhome
Rank: 2
等 级:论坛游民
帖 子:1
专家分:20
注 册:2016-6-20
得分:20 
回复 楼主 萌小佳
用bootstrap的样式就可以
2016-06-20 16:49



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-466082-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.067863 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved