文本内容的样式（overflow/text-align/text-overflow/white-space/word-break/pre/curosor/font-family）

来源：互联网发布：软件著作权申请规定编辑：程序博客网时间：2024/06/06 15:16

一 CSS控制内容两边对齐

text-align:justify;//效果不明显的属性，亦或者是根本没有效果的属性，本打算让td中的内容

实例代码：

<style type='text/css'>td{border:1px solid red;width:auto;  max-width:300px;  font:12pt arial;  }td.leftAlign {text-align:left;}td.rightAlign {text-align:right;}td.center {text-align:center;}td.justify {text-align:justify;}</style></head><body><table>    <tr>  <td class="leftAlign">Some left-aligned text.</td>    <td class="rightAlign">Some right-aligned text.</td>   </tr>   <tr>   <td class="center">Some centered text.</td>   <td class="justify">Some justified text</td>   </tr> </table></body>

结果：

在后来测试了一下，把所有的td的class都设置为justify，结果如下：

第一个td 和最后一个td有效果，文本对齐方式是justify。

2.text-justify:inter-ideograph;只是在text-align设置为justify，用于规定内容两边对齐的方式。这个属性是css3的属性，并且只有ie支持，所以用处不大，

3.固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏．

其中的text-overflow表示当overflow设置为hidden时里面的内容显示的样式，取值有两个clip和ellipsis，前者表示直接裁断内容，后者表示用一个省略号来表现后面有内容没有显示出来。该效果在所有浏览器中都支持，以前的ff不支持ellipsis，现在的ff（version 29.0）支持该取值。opera由于也用了WebKit内核，所以也支持该属性了，以前的opera是不支持的。

实例代码：

<body><style type="text/css">  .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}  .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}</style><h2>text-overflow : clip </h2>  <div class="test_demo_clip">  不显示省略标记，而是简单的裁切条</div><h2>text-overflow : ellipsis </h2><div class="test_demo_ellipsis">  当对象内文本溢出时显示省略标记wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></body>

效果：

white-space:表示如何处理文本内的空白符，nowrap取值表示，不会因为空白符（包括回车和空格）进行换行，所有的内容都会在一行显示，直到遇到br标签的时候才换行。

pre取值表示保留所有的空白，页面原样显示文本，pre-wrap会保留回车符进行换行，但是不会因为空格符进行换行，也不会合并空格符，pre-line，会保留回车符进行换行，但是不会因为空格符进行换行，但是会合并空格符。

实例代码：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.wh_sp{ white-space:nowrap;}</style></head><p class="wh_sp">      我来看看 空白符号会不会合并               是块级元素在作怪     么？           我是块级元素</p><span>   我来看看 空白符号会不会合并               是块级元素在作怪     么？           我可以么？</span><body></body>

结果：

修改：

white-space:pre;

结果：

可以看到在块级元素中的没有进行合并，而在行内元素中的空白进行了合并。

3.固定宽度汉字（词）折行：table-layout:fixed;word-break :break-all;

word-break表示对与换行单词的处理，取值有两个break-all，keep-all，前者无论可以任意截断单词，后者只在全角和半角处截断单词。

三好看的中文字体样式

font-family:"微软雅黑","黑体",serif;

四鼠标样式

default,pointer,auto,crosshair,move,八个方位-resize,help,wait,text

0 0