本文介绍了CSS中控制文本溢出的属性，如`overflow`的几种模式，以及如何使用`user-select`属性来设定用户是否可以选取文本。示例代码展示了如何结合使用这两个属性，当文本内容超出指定区域时，如何隐藏多余部分并允许用户选择全部文本。
一、文本溢出——overflow
文本溢出的常见属性有：
| visble | 默认值，内容不会被修剪，但是会呈现在元素框之外 |
| auto | 规定应该从父元素继承overflow属性的值 |
| hidden | 内容会被修剪，且其余的内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条一遍查看其余的内容 |
二、文本选择属性——user-select
该属性主要用于控制用户能不能选择文字的
常见属性值：
none——用户不能选择文字，防止选取文本
text——文本可被用户选取
all——单击选取文本，不是双击
auto——默认值，浏览器允许则可以选择文本
三、效果示例
<html>
<head>
<title>关于文本溢出属性</title>
</head>
<style type="text/css">
.one {
width: 100px;
height: 100px;
/*设置用户单击可选择所有文本*/
user-select: all;
/* 多出来的会被修剪 */
overflow: hidden;
}
</style>
</head>
<body>
<h1>关于文本溢出属性</h1>
<div class="one">
这是我的一段测试文本:
<p>随着科技的进步，网络已经成为我们日常生活中的一部分，而高县中学作为当地的唯一的一所高中学校和高考的一个考点学校，高县中学更是不能忽视网络的部署，这关系着学校的生产和发展。
</p>
</div>
</body>
</html>运行结果我们会发现它把我们多余的部分修剪了
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
