您的位置：首页 > Web前端 > CSS

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

2014-05-27 09:24 591 查看

一 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航