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

最新推荐文章于 2023-04-26 09:29:53 发布

zd10101501

最新推荐文章于 2023-04-26 09:29:53 发布

阅读量1.6k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/danzhang1010/article/details/27058037

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一 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>

结果：