`
polokang
  • 浏览: 67885 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

前台样式经验工作总结3

阅读更多
六.字体折行与不折行
修改页面样式问题,总会遇到,IE与Firefox的区别,比如数据折行和不折行展示就经常出现在页面样式中,有如下的建议:   
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是
word-wrap:break-word; overflow:hidden;
而不是
word-wrap:break-word; word-break:break-all;
也不是
word-wrap:break-word; overflow:auto;

在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
引用
word-wrap同word-break的区别
word-wrap:
normal    Default. Content exceeds the boundaries of its container.
break-word   Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
word-break:
normal      Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all   Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all     Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
当然也有与之相反的样式来控制不折行
样式white-space:nowrap; 就是控制数据不折行的。且目前见过的浏览器都兼容该样式。
分享到:
评论

相关推荐

    web前台日报表样式展示html+css仅用于个人使用

    在这个"web前台日报表样式展示html+css仅用于个人使用"的项目中,我们可以深入探讨这两者如何协同工作来创建一个实用的个人日报表。 1. HTML基础: - 标签:HTML标签定义了网页的不同元素,如`<table>`用于创建...

    Extjs4前台前台grid导出excel

    3. 设置工作簿的元数据,如表头和列宽。 4. 将工作簿写入Blob对象,然后通过`FileSaver.js`保存为Excel文件。 这个功能对于提升用户体验非常有用,因为它允许用户轻松地对Grid中的数据进行离线处理和分析。通过理解...

    电子商务网站系统(包括前台+后台)

    总结起来,"电子商务网站系统(包括前台+后台)"利用JSP、Servlet和JavaBean实现了前后台的完整功能,提供了一个用户友好的界面和强大的后台管理系统。通过解压并分析"myshop"文件,我们可以深入学习这些技术在实际...

    console.log控制台信息前台显示代码.zip

    总结来说,`console.log控制台信息前台显示代码.zip` 文件提供的是一种解决JavaScript日志信息前端显示的方案,通过`screenlog.js` 插件实现了控制台与前端界面的日志同步,提高了开发和调试的效率。在实际项目中,...

    信息管理系统前台源码html源码管理模板.zip

    总结来说,"信息管理系统前台源码html源码管理模板.zip"为开发者提供了一个强大的起点,帮助他们构建出符合用户需求,且易于维护的信息管理系统前端。无论是初学者还是经验丰富的开发者,都能从中受益,快速打造出...

    flex前台直接导出excel

    总结起来,"flex前台直接导出excel"是一种优化用户体验的技术手段,通过在前端生成Excel文件,既可以解决字符编码问题,又能减少服务器的工作量。开发者需要了解并掌握相关的库和API,才能在Flex应用中顺利实现这个...

    angular js+bootstrap实现前台分页demo.zip

    总结来说,"angular js+bootstrap实现前台分页demo" 展示了如何结合 AngularJS 的数据绑定和控制流程与 Bootstrap 的 UI 组件,实现一个简洁、高效的前台分页功能。对于希望掌握这两种技术的前端开发者而言,这是一...

    一个完整的前台和后台都有的电子商务网站

    在电子商务领域,构建一个完整的网站通常涉及到前端和后端的开发工作。这个名为"一个完整的前台和后台都有的电子商务网站"的项目,提供了一个全面的学习资源,涵盖了网站从用户界面到服务器逻辑的所有方面。让我们...

    前台登陆HTML网页模板是一款适合做前台会员登陆或者后台管理员登陆模板 .rar

    总结来说,这款“前台登录HTML网页模板”是前端开发中的一个实用工具,能够帮助开发者快速搭建登录界面,节约时间和精力,同时提供了良好的用户体验和安全性。在使用时,应根据项目需求进行适当的调整和优化,以确保...

    blog.zip_bootstrap php_bootstrap前台

    Bootstrap是一种流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件,用于快速构建响应式和移动优先的网页。而PHP则是一种广泛使用的后端编程语言,尤其适用于Web开发,用于处理服务器端逻辑和...

    JAVA工程师的短板,前台页面的制作,推荐大家一个网站,都是用JQuery做好的前台页面,希望可以帮助大家!!!

    2. **实践操作**:挑选一些感兴趣的模板进行实战练习,尝试修改样式或添加新的功能,以此来加深对前端技术的理解。 3. **参与社区活动**:加入jq22.com的社区,与其他开发者互动交流,不仅能获取宝贵的建议,还有...

    企业级前台后台模板

    3. **CSS框架**:通常使用Bootstrap或Foundation等流行的CSS框架,这些框架提供了预设的样式和组件,大大简化了开发工作。 4. **JavaScript库和插件**:如jQuery用于简化DOM操作,Vue或React用于构建动态视图,以及...

    OA系统前台框架模板含div+css+html代码

    总结起来,这个"OA系统前台框架模板含div+css+html代码"的资源,是构建一个高效、美观、易用的OA系统前端界面的基础,涵盖了网页开发的核心技术,并可能涉及到前端框架和用户体验设计的实践。对于开发者来说,理解并...

    网站前台开发api

    总结来说,这些API文档是前端开发者不可或缺的参考资料,它们详尽地解释了每种技术的用法,帮助开发者快速理解和运用。无论是在学习阶段还是实际工作中,都能从中获取到所需的信息,提升开发效率。通过深入理解和...

    163Editor前台编辑器

    3. **企业协作**:在团队内部进行文档共享、讨论,提升工作效率。 4. **电子商务**:商家编辑商品详情、活动介绍等。 5. **论坛社区**:用户发表话题、回复讨论,增强互动性。 六、总结 163Editor前台编辑器凭借其...

    Joomla中如何给前台添加下拉菜单

    ##### 3. 移植CSS样式代码 为了让下拉菜单具有良好的视觉效果,还需要对CSS样式进行适当的调整。 - 打开`/templates/rhuk_milkyway/css/template.css`文件。 - 在文件末尾添加以下CSS代码: ```css #menu, #menu ...

    番茄时钟_微信小程序模板js代码前台前端H5页面源码.rar

    "番茄时钟_微信小程序模板js代码前台前端H5页面源码.rar"是一个帮助开发者快速搭建番茄工作法计时小程序的资源。它包含H5页面源码,使用WXML和WXSS构建,以及JavaScript实现功能逻辑。通过这个模板,开发者可以了解...

    Android progress前台运算.rar

    总结来说,"Android progress前台运算"涵盖了Android中处理后台任务并同步更新UI的机制,涉及到的关键技术包括ProgressDialog、ProgressBar、AsyncTask和IntentService等。通过学习和实践这部分知识,开发者可以为...

    大学生校园招聘网前台设计与实现(PHP MySQL)(PHP)(全套计算机毕业设计)

    《大学生校园招聘网前台设计与实现》是一个基于PHP和MySQL的计算机毕业设计项目,它涵盖了网页设计、数据库管理和服务器端编程等多个方面的知识点。这个项目旨在为大学生提供一个平台,以便他们能够更方便地获取校园...

    许愿墙前台程序ASP.NET源码

    总结来说,【许愿墙前台程序ASP.NET源码】提供了一套基于ASP.NET、CSS和JavaScript的前端展示解决方案,其特点是美观的页面设计和独特的翻页效果。然而,为了构建一个完整的、功能完善的许愿墙系统,还需要额外的...

Global site tag (gtag.js) - Google Analytics