微信公众号 |  新浪微博 | 5分享社区

5分享

类别:
当前位置: 主页 > 技术圈 > 程序开发 >

html CSS中强制ul li中的文字换行

时间:2018-08-06 13:09来源:原创 作者:5分享 点击:
//white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式取值: normal | pre | nowrap | pre-wrap | pre-line | inherit

HTML例子:


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

    li{

        display:block; 

        float:left; 

        width:50px;

        margin-right:8px; 

        white-space:normal; //white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式取值: normal | pre | nowrap | pre-wrap | pre-line | inherit


        word-break : break-all; 

        word-wrap: break-word;

    }

</style>

</head>


<body>

    <div>

        <ul>

            <li>这里是自动换行例子1</li>

            <li>这里是自动换行例子2</li>

            <li>这里是自动换行例子3</li>

            <li>这里是自动换行例子4</li>

            <li>这里是自动换行例子5</li>

            <li>这里是自动换行例子6</li>

        </ul>

    </div>

</body>

</html>


欢迎关注【5分享】(fivsha)公众号获取更多帮助和资讯。   

5分享公众号.jpg

顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
网名:
验证码:点击我更换图片
最新评论