【css】固定寬度文字換行

今天群里有人問(wèn)了個(gè)問(wèn)題：在固定寬度的塊級(jí)元素中，里面的內(nèi)容最后一詞組在寬度不夠的情況下沒(méi)有換行，如何讓它換到下一行？這里我整理了下群里的方法，分享給大家。

首先給出問(wèn)題，截圖如下：

html 代碼：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>固定寬度文字換行</title>    <style type="text/css">    *{margin:0;padding:0;}    body{font:12px SimSun;}    a{color:blue;text-decoration:none;}    a:hover{text-decoration:underline;}    .demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}    </style></head><body>    <p class="demo">        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>    </p></body></html>

我們可以看出第一行和第二行由于寬度不夠?qū)е略~組斷開(kāi)了。

解決此問(wèn)題有兩種方法。

方法一：display:inline-block;

html 代碼：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>固定寬度文字換行</title>    <style type="text/css">    *{margin:0;padding:0;}    body{font:12px SimSun;}    a{color:blue;text-decoration:none;}    a:hover{text-decoration:underline;}    .demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}    .demo1 a{display:inline-block;}    </style></head><body>    <p class="demo demo1">        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>    </p></body></html>

方法二：float:left;white-space:nowrap;

html 代碼：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>固定寬度文字換行</title>    <style type="text/css">    *{margin:0;padding:0;}    body{font:12px SimSun;}    a{color:blue;text-decoration:none;}    a:hover{text-decoration:underline;}    .demo{width:100px;margin:0 auto;border:1px solid black;background:#aaa;padding:5px;overflow:hidden;}    .demo2 a{float:left;white-space:nowrap;margin-right:5px;}    </style></head><body>    <p class="demo demo2">        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)試</a>        <a href="#">測(cè)測(cè)試試</a>        <a href="#">測(cè)試</a>    </p></body></html>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

盒模型--寬度和高度

CSS元素水平垂直居中方法總結(jié)（主要對(duì)大漠以及張?chǎng)涡癫┛退龇椒ㄟM(jìn)行了歸納）

bootstrap中container類和container

WebView加載HTML圖片大小自適應(yīng) | // TODO:

DIV+CSS 星號(hào)*

用HTML實(shí)現(xiàn)簡(jiǎn)單的下雪特效

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

【css】固定寬度文字換行