用css如何截取多行文字

html-css016

用css如何截取多行文字,第1张

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

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

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

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

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

具体代码如下:

<style>

.wordwrap{width:100pxheight:36pxline-height:18pxfont:400 12px/1.5 Simsunoverflow:hiddenword-break:break-allword-wrap:break-word}

</style>

<div class="wordwrap">

    <span>文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取文字截取</span>

</div>

css文字强制换行的方法,用word-wrap属性

在默认情况下,如果文本的内容超过某个div块的宽度的话,就会发生自动换行,因为div块的white-space属性的默认值是normal。但是也有两种情况:

1、如果div块里是一串的文字内容,那么到了div块的width限制时,会自动换行。

2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了,而是直接溢出div块。这时就要考虑css文字强制换行了。

那CSS样式怎么控制文字的强制换行?

这时候我们需要用到word-wrap属性,还有一个属性word-break也能够解决换行问题,但是它的浏览器兼容性不好,并且还有可能导致其他问题,所以这里不建议使用。

word-wrap的break-word属性值可以导致换行,一般说来如果一个单词比较长的话,行末的空间不足以容纳这个单词就会产生换行,而不是将一个单词截断,word-break的break-all属性值可以截断一个单词

<style type="text/css">

    .first

    {

        width:120px

        height:60px

        border:1px solid blue

        word-wrap:break-word

    }

    .second

    {

        width:120px

        height:60px

        border:1px solid red

        word-break:break-all

    }

强制不换行

div{

white-space:nowrap

}

自动换行

div{

Word-wrap:

break-word

wo

强制不换行

div{

white-space:nowrap

}

自动换行

div{

Word-wrap:

break-word

word-break:

normal

}

强制英文单词断行

div{

word-break:break-all

}

CSS设置不转行:

overflow:hidden

隐藏

white-space:normal

默认

PRe

换行和其他空白字符都将受到保护

nowrap

强制在同一行内显示所有文本,直到文本结束或者遭遇

br

对象

原文转自站长网

设置强行换行:

word-break:

normal

依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all

:

 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all

:

 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行

CSS里加上

word-break:

break-all

问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加

word-break:

break-all

这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明,

注意word-break

是IE5+专有属性

语法:

word-break

:

normal

|

break-all

|

keep-all

参数:

normal

:

 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all

:

 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all

:

 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div

{word-break

:

break-all

}