HTML文本换行问题

2019/08/13 16:15
阅读数 4
  • 强制不换行:white-space:nowrap;
  • 超出部分隐藏:overflow: hidden;
  • 隐藏部分用省略号代替:overflow: hidden;  text-overflow: ellipsis;
  • 自动换行:word-wrap: break-word;  ( word-break: normal; )
  • 强制断开英文单词实现换行:word-break: break-all;

实例如下:

<style>
        .box1{
            /* 超出隐藏 */
            white-space:nowrap;
            overflow: hidden;
            height: 60px;
            width: 100px;
            border: 2px solid black;
            margin-bottom: 10px;
        }
        .box2{
            /* 隐藏部分用省略号代替 */
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 60px;
            width: 100px;
            border: 2px solid black;
            margin-bottom: 10px;
        }
        .box3{
            /* 自动换行 */
            word-wrap: break-word;
            word-break: normal;
            height: 200px;
            width: 100px;
            border: 2px solid black;
            margin-bottom: 10px;
        }
        .box4{
            /* 强制拆开英文单词实现换行 */
            word-break:break-all;
            height: 200px;
            width: 100px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box1">Every night in my dreams, I see you, I feel you.</div>
    <div class="box2">Every night in my dreams, I see you, I feel you.</div>
    <div class="box3">Every night in my dreams, I see you, I feel you.</div>
    <div class="box4">Every night in my dreams, I see you, I feel you.</div>
</body>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部