当前位置：网站首页 > 创业 > 正文

css怎么设置显示一行

0 张子豪 张子豪 2025-10-11 01:49 1

html网页建造中，文本要一行显示是经常碰到的问题，下面是解决的方式。

东西/原料

  • html编纂器sublimeText

方式/步调

  1. 1

    起首打开html编纂器sublimeText，如下图

  2. 2

    正常解决思绪：设心猿意马文本长度，文本一行显示，多出的埋没或者省略号显示。

    操纵的css属性white-space:nowrap;，如下图

  3. 3

    操纵的css属性word-break:keep-all;，如下图

  4. 4

    下面是具体的代码操作，如下图

  5. 5

    最总例子显示结果，如下图

    例子一没有利用以上说的2个css属性：呈现换行结果

    例子二利用以上说的2个css属性：没有换行结果

  6. 6

    最后附上全数代码，复制到html编纂器中就能实现结果

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{margin:0;padding: 0; }

    .wrap1,.wrap2{width: 200px;border:1px solid #000000;

    margin:0 auto;margin-bottom: 20px;}

    .wrap1{

    word-wrap: break-word;

    }

    .wrap2{

    white-space:nowrap;

    word-wrap: break-all;

    }

    </style>

    </head>

    <body>

    <p>111111111111111111111111111</p>

    <p>22222222222222222222222222222</p>

    </body>

    </html>

注重事项

  • 但愿对你有帮忙

来源：百闻（微信/QQ号：9397569），转载请保留出处和链接！


本文链接：https://www.ibaiwen.com/web/214050.html

张子豪

张子豪

TA很懒，啥都没写...

猜你喜欢

热门文章
热评文章
最新评论
    最近访客
    站点信息
    • 文章总数:200248
    • 页面总数:9
    • 分类总数:1
    • 标签总数:0
    • 评论总数:0
    • 浏览总数:497

    免责条款

    商务合作

    关于我们

    百闻创业

    百闻创业，是一个帮助广大创业者解决创业类的专业网站，提供创业项目、创业点子、招商加盟、创业资料、创业故事、创业计划书、小本创业、开店项目和创业指导培训的创业平台。

    @百闻娱乐 本站部分内容转自互联网，若有侵权等问题请及时与本站联系，我们将在第一时间删除处理。 | 粤ICP备2024343649号 | （地图）