用css如何截取多行文字

html-css017

用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>

overflow:hidden

text-overflow:ellipsis

white-space:nowrap

eg:<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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>