对于网页前端一些排版问题

强制不换行 
div{white-space:nowrap;}

自动换行

div{ word-wrap: break-word; word-break: normal; }

强制英文单词断行

div{word-break:break-all;}

省略号

div{width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}

CSS设置不转行:

overflow:hidden 隐藏
white-space:normal 默认 
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行:
word-break: 
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

时间: 2024-10-13 20:51:03

对于网页前端一些排版问题的相关文章

Eruda——手机网页前端调试面板

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种类型的浏览器APP........还好移动端的相对一致点,但是往往都会有一些各种各样的坑,这时候就蛋疼了,明明chrome调试工具中是正常的, 一到某个浏览器中就炸了,怎么办,又无法像在chrome中使用调试工具进行调试,只能通过alert()弹窗来调试,有什么办法可以像PC上那样清晰,可视化的调试

网页前端开发,对于图片慢加载简介

http://www.cnblogs.com/qingseyuandi/p/loadingLater.html 网页前端的图片慢加载给网页显示的成本降低了不少,因此我在这边简单的介绍一下慢加载的一个技术原理,希望能起到抛砖引玉的作用,写的不好的地方希望指正,谢谢~~   技术背景 现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...  技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~

写给IOS开发工程师的网页前端入门笔记

前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求上思考,用 HTML5确实是个不错的选择,利用了跨平台的同时,也考虑到了理财类型的app仅仅需要处理的是数据的业务逻辑,不存在较多的本地存储数据,而且涉及到 的财务信息从安全性考虑数据基本都会存储在服务器端,是不可能用于存储在本地的,再加上HTML5对各种手机屏幕的尺寸适配性非常灵活,所以这一类ap

网页前端页面加载性能测试各工具可行性方案分析

网页前端页面加载性能测试各工具可行性方案分析 征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议. 1 .webbrowser(内核IE10)和IE10浏览器的比较: Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解

解决网页前端的图片缓存问题

当需要在网页前端动态修改图片之后,发现刷新之后图片并没有改变,这明显是图片缓存的原因(因为路径没有变,还是同样的文件名),怎么解决这样的问题呢? 查了网上各种的说法,发现最好用的最简单的还是 使用[随机数]的方法... $("#tbPic tbody img:eq(0)").attr("src", "../upimages/images/2014/1-bg.jpg?tempid=" + Math.random());

HTML、DIV+CSS网页制作中排版混乱的几种常见的情况

对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需要的位置,或者出现页面重叠的现象.以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结,不足之处,希望大家互相补充学习. )DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了

简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

网页前端技巧

做前端开发的时候,通常都是由美工设计好相应的PSD,做好特效说明后交由到前端手中,然后再转换为网页. 经验一:重置设置 网页设计的时候,不同浏览器对标签的定义不同,所以一般前端在设计之初通常都会对网页中的标签属性进行重置. 常见的重置CSS:http://www.cnblogs.com/Seanit/p/4435959.html 经验二:宽屏PSD效果 目前,很多的美工设计PSD的时候,采用的是1920px的宽度.为什么?因为很多网页要考虑到宽屏的显示效果.所以在设计的时候通长会做一些的设置 第

16-11-12 网页前端技术学习总结

学习了将近一个月的前端知识,也学到了不少之前仅有概念的东西,整个网页的制作目前也只是学了一些浅显的东西.网页分为HTML,CSS,JS(JQ).这三类应用技术时目前所学到的前端应用技术,最底层的HTML代码负责整个页面的内容注入,虽然也有样式语句,但是样式的语句都是由CSS来负责完成,而一些其他的页面的演示效果由JS(JQ)来完成.HTML语句中最重要的框架标签<html></html>用于声明页面格式,<meta charset="">用于设置代码