网站很多地方都需要用省略号来截断长文本，比如分类页里每篇文章的概要等，那么怎么用css来实现呢？其实并不复杂，最后的效果如下图：
我们要用 text-overflow: ellipsis; 表示用省略号代替截断的文字。
要实现图中的效果，只用这一句代码还不行，我们还需要：
1、为文本设置一个明确的宽度，以限制文本的范围
2、还需要 white-space: nowrap; overflow: hidden; 这样可以使文本在一行显示，并且隐藏超过部分，用省略号代替。
CSS截断长文本并使用省略号代替 完整代码如下所示：
.truncate-to-300 {
text-overflow: ellipsis;
width: 300px;
white-space: nowrap;
overflow: hidden;
}下面是html代码，这样就实现了上图中的效果
<h1 class="truncate-to-300">A CSS tricky situation- the order of the CSS class names in the HTML tags</h1>还有一些技术允许在多行后截断文本，但实现起来有点麻烦，以后我们再做分享！
相关推荐
-
如何在 CSS 中使用 currentColor 值
在 CSS 中，我们有一个名为 currentColor 的特殊颜色值，可能大多数人都不知道。 currentColor 所做的是获取颜色属性的值并将其用于任何其他具有颜色参数的属性。 例如以下内容： 下面currentColor写法与上面效果一...
-
如何异步加载 CSS 文件
我们可以像这样异步加载 CSS： 应该什么时候使用css异步加载？ CSS 渲染是阻塞的，所以要考虑性能问题，因为浏览器下载 CSS，会停止绘制页面。因此，任何对首屏内容不重要的 CSS 都应该异步加载。另外，14kb-ish 是...
-
css怎么设置字体加粗（css设置字体粗细）
1、首先就是打开Sublime Text编辑器，新建一个HTML页面，并添加HTML结构，如下图所示 2、然后在body区域添加字体，注意放在一个div里面，如下图所示 3、接下来就可以在CSS中用font-weight进行加粗设置了，只需要设置...
-
css隐藏元素的几种方法和区别（css隐藏元素的三种方法）
1，通过设置display：none 2，input设置type为hidden 3，通过设置层级z-index 使其处于某个div下层来实现隐藏效果...
-
css图片透明度怎么设置（css透明属性）
1、新建html文档，在body标签中添加一个img标签，这时默认情况下图片是不透明的。 2、在head标签中添加style标签，在style标签中为img标签设置透明度样式，其中三个属性是为了兼容不同浏览器。 3、刷新浏览器中的页...
-
CSS calc()函数用法
calc() 是一个 CSS 函数，可让您直接在 CSS 中计算值。例如： 此功能最有用的功能之一是您可以混合多个 CSS 单位使用。在我们的示例中，我们使用了像素百分比，当然我们也可以使用 em、pt、rem 等。 我发现90%情况都...
