如何用word-wrap解决文字溢出的问题

  p中明明限制了宽度 ,但是输入aaaaaaaaaaa…等却不会自动换行,检查了一通没发现问题,原来是(连续的字母会当作一个单词处理), 外国人看认为一个单词不应该换行,以下给出的解决方法:

  word-break:break-all 和 word-wrap:break-word

  word-break:break-all和word-wrap:break-word经常用来解决长字符串换行问题。

  经过一系列测试后,发现word-break:break-all在IE6/7/chrome/safari为一派,表现为尾部截断,而ff3.0/opera表现为无效。既过长单词换行显示,然后溢出边界。

  word-wrap:break-word;在IE6/7/chrome/safari为一派 表现为长单词换行,再显示不下才裁切。而ff3.0/opera也表现为无效

  显然word-wrap:break-word;要更符合用户体验,word-break:break-all则可以忽略了,外国人不喜欢把英文单词切开来看。而针对于ff3.0和opera则只能用overflow-x:hidden隐藏了(ff3.5已经支持此属性)。

  所以这里建议

  word-wrap:break-word;overflow-x:hidden;width:500px;

以上就是如何用word-wrap解决文字溢出的问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2833996.html

(0)
上一篇 2025年3月9日 05:35:26
下一篇 2025年3月9日 05:35:34

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 点击按钮文字变成input框,点击保存变成文字的实现

    下面为大家带来一篇点击按钮文字变成input框,点击保存变成文字的实现代码。内容挺不错的,现在分享给大家,也给大家做个参考。 点击按钮文字变成input框,点击保存变成文字的实现代码 nbsp;html>      点击按钮文字变成i…

    编程技术 2025年3月9日
    200
  • 网页制作中的W3C标准的作用和好处

    W3C标准在网页制作中的作用和益处 随着互联网的发展,网页制作成为了每个企业和个人不可或缺的一部分。为了提供用户友好的网页浏览体验,保证网页的互操作性和可访问性,W3C(万维网联盟)制定了一系列的标准,这些标准在网页制作中发挥着重要的作用,…

    2025年3月9日
    200
  • 解决localstorage安全漏洞的方法

    localstorage存在的安全漏洞及如何解决 随着互联网的发展,越来越多的应用和网站开始使用Web Storage API,其中localstorage是最常用的一种。Localstorage提供了一种在客户端存储数据的机制,可以跨页面…

    2025年3月9日
    200
  • div中文字内容溢出如何解决

    有时候我们在div里编辑内容时会溢出,那么出现这种情况怎么办呢?本文主要介绍了p中文字内容溢出常见的解决方法。具有很好的参考价值。来一起学习一下吧。 由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: …

    编程技术 2025年3月8日
    200
  • JQuery全选反选第二次失效解决办法

    本文主要为大家带来一篇解决jquery全选/反选第二次失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选…

    2025年3月8日
    200
  • input标签输入框带提示文字方法

    本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家。 方法一:html5配合css3实现带提示文字的输入框(摆脱js); webkit特有的一个css,可以控制里面的文字样式,配合cs…

    2025年3月8日
    200
  • vue引入stylus及报错如何解决

    本文主要和大家介绍vue中引入stylus及报错解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 前提条件是已经有了vue项目,如果没有,请先建立 安装stylus 好了,建立好项目后…

    2025年3月8日 编程技术
    200
  • ajax的跨域问题如何解决

    这次给大家带来ajax的跨域问题如何解决,解决ajax的跨域问题的三种思路,下面就是实战案例,一起来看一下。 ajax跨域问题的解决思路主要分为3种: 1.浏览器限制解决思路:不让浏览器做出限制解决方法:通过指定参数,让浏览器不做跨域校验评…

    编程技术 2025年3月8日
    200
  • ES6之WeakMap解决内存泄漏

    本文主要和大家介绍了详解es6通过weakmap解决内存泄漏问题,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 一、Map 1.定义 Map对象保存键值对,类似于数据结构字典;与传统上的对象只能用字符串当键不同,Map对象可以使用任…

    编程技术 2025年3月8日
    200
  • 如何用swift设置debug

    这次给大家带来如何用swift设置debug,用swift设置debug的注意事项有哪些,下面就是实战案例,一起来看一下。 在OC中可以设置 #if DEBUG #else #endif 来区分正式环境和测试环境 #if DEBUG &#8…

    2025年3月8日
    200

发表回复

登录后才能评论