html中有两类元素（也就是标签），block和inline。
block类型的标签默认情况下会在两边自动加上换行。而inline则不会。
表格属于block类型的，所以它会跳到下一行。要想让它不自动换行可以设置它的css样式display属性的值为inline.
如<body>
这是前面的文字<table style="display:inline"><tr><td>这是表格里的内容
</td></tr></table>
</body>
html 强制不换行标签元素：
可以用nobr标签来实现。
nobr语法
<nobr>内容</nobr>
不换行内容放入<nobr>与</nobr>之间即可。
此标签与css white-space功能相同。
nobr标签特点：如不遇到br换行标签，内容在一行显示完，如遇到br换行标签，内容将在加br换行自动换行。
html nobr禁止内容换行案例：
这里假如有4行文章标题列表，设置宽度为200px；css行高为22px；对4列的内容我们采用ul li列表布局，其中2个对内容加<nobr>标签，一个li内容不加，另外一个li内容少与宽度能显示完。
将h标签设定成内联方式（inline）就行了。例如：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.hh { display: inline }
</style>
</head>
<body>
<h1>这是一行文字，自动换行</h1>
<h1>这是一行文字，自动换行</h1>
<h1 class='hh'>这是一行文字，不再换行</h1>
<h1 class='hh'>这是一行文字，不再换行</h1>
</body>
</html>
运行结果：
在WEB应用中,如果使用jsp作为view层的显示模板,都会被空格/空换行问题所困扰.这个问题当年也困扰了我比较长的时间.因为在jsp内使用的EL标签和其他标签时,会产生大量的空格和换行符.例如:
复制代码代码如下:
------- start ----------
<c:choose>
<c:when test="${fn:length(mainPageList)>1&}">
Something
</c:when>
<c:otherwise>
Others
</c:otherwise>
</c:choose>
------- end -----------
这段代码在Tomcat上输出如下，多了几行换行。
复制代码代码如下:
------- start ----------
Something
------- end -----------
当然，一般不去特别留意是不会发现有什么问题的，毕竟输出再多的空格和换行符，对于浏览器生成的最终效果是一样的。也就是大部分开发人员忽略这个问题的原因；但实际上这些空格和换行会占用了不少空间，我的经验是30%左右是空格/换行。也有人说，当web服务器以zip的方式来输出html时，空格引起的带宽问题就可以解决了；是的，当使用zip来输出html时，空格/换行的空间会被节省回来，但这个增加zip的工作量，而且最大的问题是，浏览器生成页面时，还是会还原所有的空格的换行符。对于前端开发人员来说这是个噩耗，面对大量的空格和冗长的html源码，想要找到对应出问题的样式所在的位置可不是容易的事情。
下面说一下解决方案，以Tomcat为例：
方案一，利用web服务器的trimSpaces功能。
Tomcat5 以上版本都可以使用，这是最简单的方法。
复制代码代码如下:
<servlet>
<servlet-name>jsp</servlet-name>
<servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
<init-param>
<param-name>fork</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>trimSpaces </param-name>
<param-value>true </param-value>
</init-param>
<init-param>
<param-name>xpoweredBy</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>3</load-on-startup>
</servlet>
这个方案有个缺点，它会去掉所有jsp EL标签之间的空格的换行符，在部分情况下也来带来不便。
如：Your name is ${firstName} ${lastName}. ==输出为==>Your name is firstNamelastName.
两个${}变量之间的空格也会消失。要解决这个问题是相当麻烦，要引入一个只有一个空格的变量。
<c:set var="one_space"></c:set>
Your name is ${firstName}${one_space}${lastName}.
这样就正常了，麻烦。虽然可以在一些全局变量的地方来增加一个one_space的变量，但代码看上去还是不爽。
方案二，我比较喜欢。
这个方案只有在支持jsp 2.1的web服务器上才可以使用，如Tomcat6。
Jsp2.1多了一个很有用的命令；
<%@ page trimDirectiveWhitespaces="true" %>
这个命令可以使jsp输出的html时去除多余的空行（jsp上使用EL和tag会产生大量的空格和空行），没有使用trimSpaces的问题，现在jsp输出html也可以很好地排版，看上去也专业；以前我一直都羡慕velocity的模板，输出html十分干净好看，现在jsp也可以了。
另外提一下，Tomcat6有一些兼容性问题，例如不能使用#{}这种代码在jsp中，因为会被当成JSF脚本执行。
虽然这是一个很小的问题，但我们还是要注意细节。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）