`

css控制字符长度

CSS 
阅读更多

最近出差做个需要DIV+CSS布局的项目,才发现其中有很多问题需要解决。这里把一些问题记录下来,方便以后。

通常的我们在读取文章标题的时候,遇到字符过多,都是通过程序在SERVER端截取一定的字符数,然后添加…来实现标题长度截取的。其实我们也可以通过CSS来控制。

实列如下:

.title
{
 width:200px;
 white-space:nowrap;
 word-break:keep-all;
 overflow:hidden;
 text-overflow:ellipsis;
}

可用span或div引用,例如:

<span class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</span> 
<div class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</div> 

<style type="text/css"></style>

以上2例显示在超过样式定义的200px宽度后,后面的字符将被…替换.

分享到:
评论

相关推荐

    css控制td内容长度

    table中的内容经常超过了我们固定的td长度,这个css控制td的内容,如果超过了td长度则自动隐藏超过长度的字符,显示... 鼠标移过时,显示完整的td信息。

    CSS 控制标题长度,不再需要切字符串函数了 ^_^.txt

    ### CSS控制标题长度,不再需要切字符串函数 在网页设计中,经常遇到标题或文本过长而需要进行截断的情况。传统的做法是通过JavaScript或其他脚本语言来实现文本的截断,但这种方式不仅增加了页面的复杂性,还可能...

    用css控制字符串的输出长度超出时隐藏

    这时,CSS提供了一种解决方案,即通过结合使用`width`、`white-space: nowrap`、`overflow: hidden`和`text-overflow: ellipsis`等属性来实现字符串的输出长度控制。下面将详细解释这些属性的作用以及如何应用它们。...

    CSS(js)限制页面显示的文本字符长度.docx

    总的来说,限制页面显示的文本字符长度可以通过CSS的`text-overflow`属性结合`overflow`和`white-space`来实现简单的效果,而更精确的控制则需要借助JavaScript,例如上述的jQuery插件。在实际应用中,可以根据需求...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    `white-space`属性用于控制元素内的空白字符处理方式,其可选值有`normal`、`pre`和`nowrap`。`normal`是默认值,允许文本自动换行;`pre`保留换行和空白字符;`nowrap`则强制文本在同一行显示,直到遇到`br`元素。 ...

    HTML+css 超出字符省略号表示

    `white-space`用于控制空白符的处理,`overflow`决定超出内容的处理方式,`text-overflow`则定义如何显示超出的内容。 以下是一个基本的CSS样式示例: ```css #ellipsis-text { width: 200px; /* 设置一个固定的...

    CSS控制html文本溢出

    ### CSS控制HTML文本溢出详解 #### 一、引言 在网页设计中,经常会遇到内容超出容器宽度的情况。为了使页面布局更加整洁美观,合理地处理文本溢出显得尤为重要。CSS提供了多种方法来实现这一目标,其中一种常用的...

    纯css控制超出部分省略号显示

    ### 纯CSS控制超出部分省略号显示 在网页设计与开发中,经常会遇到文本长度不可预知的情况,特别是当容器的宽度固定时,如何优雅地处理超出部分的文本展示就显得尤为重要。本文将详细介绍如何仅使用CSS来实现文本...

    css截取字符串简单实例

    在这里,CSS并非传统意义上的编程语言,它不具备直接截取字符串的功能,但它可以通过一些属性来控制文本的显示,让其在视觉上呈现出截断的效果。 描述部分强调了CSS截取字符串的方法已经不再是难题,并且互联网上有...

    css+div布局和css教程和css的api

    5. CSS长度单位、颜色值和字体单位:了解各种单位的用途,以便精确控制样式。 通过阅读《DIV+CSS布局大全.pdf》和解压后的《css2.0api.rar》文件,你可以获得更深入的理论知识和实际案例。而《css教程》则提供了...

    CSS(js)限制页面显示的文本字符长度

    这个场景中提到的问题就是如何使用CSS和JavaScript(特别是jQuery)来限制`&lt;span&gt;`元素内的文本字符长度。让我们详细了解一下如何实现这一功能。 首先,CSS在限制文本长度方面的能力相对较弱。CSS本身没有直接提供...

    控制input输入的长度尺寸

    使用 CSS 控制 input 输入框的长度尺寸非常方便,例如:`;" /&gt;`。 5. 自动获得焦点 可以使用 JavaScript 来实现自动获得焦点,例如:`”document.forms.form_name.form_field.focus()”&gt;`。 控制 input 输入框的...

    css自动截取指定长度字符串,结尾显示... 支持FF浏览器

    ### CSS自动截取指定长度字符串方法及支持Firefox浏览器解析 #### 概述 在Web开发过程中,经常需要处理文本溢出的问题,特别是当容器宽度固定而内容长度不定时,合理控制文本显示,既能保证页面布局的美观又能提高...

    如何通过CSS样式设置单元格显示内容的长度.doc

    总之,通过`table-layout: fixed`和相关的CSS样式,我们可以有效地控制表格单元格内文本的显示长度,提高页面性能,并保证视觉效果的一致性。在实际项目中,根据具体需求灵活运用这些技术,能够提升用户体验,同时也...

    css属性详解说明,css属性详解说明

    ### CSS属性详解 #### 背景属性 (Background Properties) **1....- **简介:** `background` 是一个简写属性,用于在单个...通过这些属性,我们可以有效地控制网页中的视觉效果,实现丰富的布局设计和美观的界面展示。

    CSS3截取字符串实例代码【推荐】

    通常,我们使用JavaScript或后端语言来截取字符串,但CSS3也提供了一种方法来实现这一功能。这种方法的优点在于,它可以在不涉及额外脚本的情况下,仅通过样式控制来实现文本的截取。接下来,我们将深入探讨如何使用...

    js+css3随机密码生成器代码

    3. **用户输入验证**:为了确保用户输入的有效性,可能会有JavaScript代码进行验证,例如检查字符长度是否为正整数,或确认用户至少选中了一种字符类型。 **CSS3部分** CSS3是层叠样式表的最新版本,提供了许多...

    CSS4.0中文参考手册_java_

    8. **更灵活的单位**:CSS4.0引入了新的长度单位,如`ch`(字符宽度)和`fr`(flex容器的分数单位),以及`clamp()`函数,使尺寸控制更为精准。 9. **边框和背景**:增加了`conic-gradient`作为背景图像,允许创建3D...

Global site tag (gtag.js) - Google Analytics