`
jsntghf
  • 浏览: 2526368 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

用css截取字符串

阅读更多

一般网页上截取字符串有两种方式,一是通过程序语言,如ruby、php、java来截取,二是通过css来截取。前者的缺点是页面上字符缺失,不利于SEO,而且遇到中英文混合时,往往截取长度不同,css的缺点是有可能在页面上看到截取一半的字。不过总体还是css的优点占优。

 

下面是css截取字符串的代码:

 

div {
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    float:left;
    -o-text-overflow:clip; /* for Opera */
    text-overflow:clip;    /* for IE */
}

 

如果你想在截取字符串之后加上...可以用以下的代码:

 

div {
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    float:left;
    -o-text-overflow:ellipsis;     /* for Opera */
    text-overflow:ellipsis;        /* for IE */
}
div:after {
    content:"...";   /* for Firefox */
}

 

分享到:
评论

相关推荐

    CSS截取字符串

    利用CSS截取字符串,更好的优化系统,节约资源,避免不必要的错误

    css截取字符串简单实例

    复制代码代码如下: <... <head> <... <ul> <li>css截取字符串 css截取字符串css截取字符串css截取字符串</li> <li>css截取字符串 css截取字符串 css截取字符串 css截取字符串</li> <li>css截

    截取指定长度的字符串

    例如,在Python中,你可以使用切片操作符`[start:end]`来截取字符串,其中`start`是开始索引,`end`是结束索引(不包括该位置的字符)。例如,对于字符串`s = "Hello, world!"`,`s[7:12]`将返回`"world"`。 2. ...

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

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

    js截取字符串功能的实现方法

    js截取字符串2种方式:substring()、slice(),供大家参考,具体内容如下 这里给出的例子是时间。 css文件: body{ text-align:center} .con{ margin:100px auto; width:800px; height:400px; border:2px solid...

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

    通用的CSS截断字符串的方法是利用`text-overflow`属性,结合`overflow`和`white-space`。如下所示: ```css div.test { width: 200px; height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ...

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

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

    标题过长使用javascript按字节截取字符串

    一般情况下,如果我们使用CSS来截取字符串,可能会遇到很多兼容性问题,因为不同浏览器对CSS截取的支持程度不一。而如果将截取字符串的任务推给后台处理,又会面临沟通成本高、后台可能不愿意配合等问题。那么,如何...

    php,js,css字符串截取的办法集锦

    通过以上内容,我们可以看到,在不同环境下处理字符串截取问题时,需要根据所使用的语言和工具选择合适的方法。对于PHP而言,关注字符编码是关键;对于JavaScript,需要了解`substring`和`substr`的细微差异;而在...

    jQuery截取指定长度字符串代码

    本文将详细讲解如何使用jQuery截取指定长度的字符串,并分析相关的实现原理及代码注释。 标题所提到的"jQuery截取指定长度字符串代码"实际上是一个JavaScript插件方法,它扩展了jQuery的核心功能,允许开发者便捷地...

    用css截取字符实现文字自动截断隐藏溢出文本

    以下将详细解释如何通过CSS截取字符实现文字的自动截断隐藏溢出文本,以及相关的关键知识点。 ### CSS截取字符实现文字自动截断隐藏溢出文本 为了实现文字的自动截断隐藏溢出,可以采用CSS的`text-overflow`属性。...

    ASP.NET两个截取字符串的方法分享

    在处理文本数据,尤其是在需要显示格式化文本或优化页面布局时,如何有效地截取字符串显得尤为重要。本文分享的两个字符串截取方法主要应用于将长字符串按照指定的长度进行截取,并且在必要时进行自动换行处理。 第...

    jsp页面字符串截取,点击弹出弹出层

    在JSP页面上,如果你有一个字符串变量,你可以使用Java的`substring()`方法来截取字符串的一部分。例如,如果有字符串`str = "Hello, World!"`,你可以通过`str.substring(startIndex, endIndex)`来截取。这里的`...

    CSS:用overflow代替left截取指定长度字符串

    另一种是在服务器端使用字符串函数,如`left`,来截取标题的指定长度。这两种方法各有优缺点,下面我们将深入探讨。 首先,处理位置不同。使用CSS的`overflow`属性是客户端渲染的方式,它在用户浏览器中执行,根据...

    关于中gridview 字符串截取的方法

    通过设置CSS属性,例如宽度(width)、文本对齐(text-align)、溢出隐藏(overflow)、省略号显示(text-overflow)以及空白处理(white-space),可以使得超出设定宽度的字符串部分用省略号代替,而不影响页面布局...

    字符串过长CSS截取多余文字并用省略号显示

    在网页设计中,有时我们需要对过长的字符串进行截取,并在结尾处添加省略号以保持布局的整洁和美观。CSS(Cascading Style Sheets)提供了一种优雅的方式来实现这个功能,尤其对于动态生成的内容,如用户昵称或者...

    jquery 截取字符串的实现

    ### 使用jQuery实现字符串截取功能 #### 一、概述 在网页开发中,经常会遇到需要对文本内容进行处理的情况,比如限制某个元素内的文本长度,让过长的文字以省略号或其他形式展示,并且保留完整内容作为提示信息。...

Global site tag (gtag.js) - Google Analytics