css样式截取,css截取字符串

用css如何截取多行文字

css截取多行文字可以使用容器的超出隐藏来实现，注意：多行无法截取后面不会出现省略号；

1、因为要对其设定宽高，所以设置容器为block或者inline-block；

2、设置overflow:hidden;让超出内容的部分不显示；

3、为了避免长单词，长的数字不换行，还需要对该容器设置:word-break:break-all;word-wrap:break-word;

这样就可以实现了文字的截取效果；

具体代码如下：

style

.wordwrap{width:100px;height:36px;line-height:18px;font:400 12px/1.5 Simsun;overflow:hidden;word-break:break-all;word-wrap:break-word;}

/style

div class="wordwrap"

    span文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取/span

/div

相关问答

Q1: 用CSS样式截取字符串，多的用省略号表示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

eg:html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title/title

/head

style type="text/css"

div.test{

width:200px;

height:100px;

border:1px solid red;

padding:10px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

/style

body

div class="test"

做自己的SEO 做自己的DIV+CSS 做自己的PHP

/div

/body

/html

Q2: css怎样截取图片的一部分呢？

你用的是精灵技术，这需要定位position定位，设置一个长度和宽度，然后设置该图片为背景，然后定下位就可以了。很简单