前端开发设置文本不换行

normal：正常显示，如果宽度不够进行折行显示

nowrap：即使超过盒子的宽度，文本也不进行换行显示

pre：写html代码的时候是什么样式，就显示成什么样式

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>我是中国人</title>

        <style>
            p {
                background-color: red;
                height: 400px;
                width: 300px;
            }

            .p1 {
                white-space: pre;
            }

            .p2 {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <p class="p1">
            据俄罗斯卫星通讯社9日报道，在与亚阿领导人进行一系列通话后，
            普京呼吁双方出于人道主义考虑停止在纳卡地区的作战行动，
            以交换死者遗体和俘虏。他邀请两国外长周五赴俄就纳卡局势进行磋商。
            亚阿两国外长9日启程前往莫斯科。俄总统新闻秘书佩斯科夫表示，
            纳卡问题外长级会谈将于9日15时在莫斯科举行。
            不过当天的会谈比这个时间推迟了约一个半小时。在会谈开始后，
            俄外交部发言人扎哈罗娃在脸书发布一张俄亚阿外长坐在圆桌旁的照片
        </p>
        <p class="p2">
            阿塞拜疆国防部称，从8日下午到9日上午，纳卡前线的战斗仍十分激烈。亚外交部新闻秘书9日表示，亚俄阿外长9日会谈的议题将仅限于停火和人道主义问题。法新社援引法国总统府的消息称，亚阿可能会在9日晚上或10日在纳卡地区实现停火，不过停火协议可能会很脆弱。佩斯科夫拒绝对这一报道发表评论。他表示，克里姆林宫没有关于亚阿即将停战的消息
        </p>
    </body>
</html>
复制代码

image

posted @   thomas_blog  阅读(1664)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示