首页 > 软件开发 > HTML >

HTML怎么定义溢出文本

来源:互联网 2023-03-16 19:17:08 157

最近有小伙伴问我HTML怎么定义溢出文本,今天小编就把这种方法带给大家吧FlM办公区 - 实用经验教程分享!

HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

工具/原料

  • 电脑:台式机或笔记本
  • 软件:Dreamweaver

方法/步骤

  • 1

    我们首先来看看文本溢出的情况,很明显当宽度不够时,文本会自动换行FlM办公区 - 实用经验教程分享!

    HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

  • 2

    我们用Dreamweaver打开这个网页FlM办公区 - 实用经验教程分享!

    HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

  • 3

    然后给文本添加这样一段CSS样式:FlM办公区 - 实用经验教程分享!

    white-space: nowrap; /*超出的空白区域不换行*/FlM办公区 - 实用经验教程分享!

    overflow: hidden; /*超出隐藏*/FlM办公区 - 实用经验教程分享!

    text-overflow: ellipsis; /*文本超出显示省略号*/FlM办公区 - 实用经验教程分享!

    HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

  • 4

    然后点击保存并在浏览器中浏览FlM办公区 - 实用经验教程分享!

    HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

  • 4本页面未经许可获取自百度经验
  • 5

    可以看到,溢出显示不了的文字变成了省略号,不是换行了FlM办公区 - 实用经验教程分享!

    HTML怎么定义溢出文本FlM办公区 - 实用经验教程分享!

  • 总结

  • 1

    当我们在做网页的时候,如果我们要想在不同设备运行下保证布局不会出错,就需要对文字的长度进行限定。这时这个样式就能够派上用场了FlM办公区 - 实用经验教程分享!

  • 注意事项

    • 制作不易,转载注明出处

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!FlM办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码