CSS控制文本长度比用c和fn标签来控制文本长度好用多了，特此记录下。
此处要用到的语法为CSS中的：
1、
text-overflow:clip | ellipsis
clip:不显示省略标记（...），而是简单的裁切；
ellipsis:当对象内文本溢出时显示省略标记（...）
text-overflow:ellipsis
2、
white-space:normal | pre | nowrap| pre-wrap | pre-line | inherit
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值
强制文本在一行内显示（white-space:nowrap）
3、
overflow ： visible | auto | hidden | scroll
溢出内容为隐藏（overflow:hidden）
<html>
<head>
<style type="text/css">
.text-hide{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:200px;
}
</style>
</head>
<body>
<div class="text-hide">
Dota官方全称LogoDota是Defense of the Ancients的简称，可以译作守护古树、守护遗迹、远古遗迹守卫， 是指基于魔兽争霸3：冰封王座（由暴雪娱乐公司出品）的多人即时对战自定义地图，可支持10个人同时连线游戏。DotA是目前唯一被暴雪娱乐公司官方认可的魔兽争霸的RPG地图。Allstars系列现更新作者为美国人IceFrog。
截至日前，DotA Allstars官方最新版本为6.74c，AI版本为DOTA6.74c AI简体中文版。
</div>
</body>
</html>
分享到：
相关推荐
代码如下： ... ;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; >a b c d e f g h i j k l ,...还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏
这意味着如果文本长度超过容器的宽度，则多余的文本将被隐藏，并且在末尾显示省略号(...)。同时，通过设置`font-size`和`width`属性，可以调整文本的大小和容器的宽度。 ##### 2. `p` 元素样式 ```css p { text-...
本文将深入探讨如何实现对`textarea`文本长度的控制，并实时显示输入字数的统计。 首先，我们可以使用JavaScript来实现这一功能。JavaScript是一种广泛使用的客户端脚本语言，可以在用户与网页交互时执行，提供动态...
### 纯CSS控制超出部分省略号显示 在网页设计与开发中，经常会遇到文本长度不可预知的情况，特别是当容器的宽度固定时，如何优雅地处理超出部分的文本展示就显得尤为重要。本文将详细介绍如何仅使用CSS来实现文本...
但是，这种方法无法精确控制显示的字符数，只能确保文本在一行内显示，并在超出时添加省略号。 ```css .limited-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 然而，如果...
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号，但鼠标可以选择文字，酷吧……
这种CSS文本截断的方法在现代浏览器中表现良好，包括Chrome、Firefox、Safari以及较新的版本的IE。需要注意的是，对于非常旧的浏览器版本（如IE6/7），可能无法完全支持这些CSS特性，因此在开发时应考虑使用...
"css+js背景自适应文本长度的精美导航条"是一个利用CSS（层叠样式表）和JavaScript技术实现的动态导航条设计，具有背景自适应文本长度、滑动效果以及偏金属色调的质感特点。下面我们将详细探讨这些知识点。 首先，...
总之，通过`table-layout: fixed`和相关的CSS样式，我们可以有效地控制表格单元格内文本的显示长度，提高页面性能，并保证视觉效果的一致性。在实际项目中，根据具体需求灵活运用这些技术，能够提升用户体验，同时也...
这个插件的功能是在文本超出设定长度时自动截断并添加省略号，从而在视觉上限制了显示的文本长度。 在这个jQuery插件的实现中，首先定义了一个名为$.fn.wordLimit的函数，该函数能够接受一个数字参数num，表示要...
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
当文本长度超过容器宽度时，超出部分会被隐藏，并在结尾处显示省略号。 接下来是自动换行的设置。如果你希望文本在遇到边界时自动换行以适应容器，可以使用`word-break`和`white-space`属性。以下是一个例子： ```...
总结来说，通过上述几个CSS属性的组合使用，开发者可以控制网页中的文本在溢出时优雅地显示省略号，从而使页面布局更加美观和整洁。这对于创建响应式网页设计尤为重要，可以确保在不同屏幕尺寸和设备上的用户体验。...
在网页设计中，CSS（Cascading Style Sheets）是一种强大的样式语言，用于控制网页元素的外观，包括文本的样式、布局和结构。Dreamweaver CS6 是一款流行的网页设计工具，它提供了一种直观的方式来应用CSS样式，使...
在CSS中，文字控制和文本样式是构建良好用户体验的基础，对网页内容的可读性和美观性具有重要影响。以下将详细介绍CSS中与文字控制及文本样式相关的属性和示例。 一、CSS控制文字属性： 1. font-size：该属性用于...
总结起来，jQuery提供了控制文本长度的一种有效方法，特别是当涉及到不同语言字符宽度不一致时，使用CSS来控制文本长度可能会遇到一些困难。jQuery的灵活和动态特性使得它能很好地适应这类问题，通过实时计算和动态...
本系列将从零开始，逐步介绍CSS文本属性的相关知识，并提供简单的教程案例，以便大家能够更好地理解和应用。 首先，要了解的是`line-height`属性，它用于设置文本的行高。在CSS中，可以给某个元素指定一个不带单位...
这样，当文本长度超过容器宽度时，浏览器会在末尾显示省略号。 以下是一个使用`text-overflow`实现固定宽度新闻列表的例子： ```html 收藏新闻 钱币|5 盎司彩银虎币价值几何 三连 8 豹子钞市值达千元 <!-- 更...