Method of skipping text beyond the set number of lines

Because most of the mobile is the WebKit kernel browser, if the pure to achieve the text beyond the specified number of lines, the rest of the content omitted and added "...", you can directly use the WebKit private properties:-webkit-line-clamp来实现


CSS Code

. Box {    : hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 2;     -webkit-box-orient: vertical;}

HTML code

<class= "box">The completion of the 001A aircraft carrier marks China as one of the few countries in the world where aircraft carriers can be built independently, As China is in the process of rapid development of the Blue Water Navy, in the near future China will have more than one aircraft carrier formation can be expected, China's construction of a strong navy has really opened the curtain. </ Div >

If there is still a need to expand all and the action, then the light with CSS is not possible.

A more mature JQuery plugin is recommended here-jquery.dotdotdot

First introduce Jquery.js and dotdotdot.js

HTML code

<class= "Dotbox"> The completion of the 001A aircraft carrier marks China as one of the few countries in the world where aircraft carriers can be built independently, As China is in the process of rapid development of the Blue Water Navy, in the near future China will have more than one aircraft carrier formation can be expected, China's construction of a strong navy has really opened the curtain.  </div>

CSS Code

. dotbox.opened{Height:Auto;} /* Expand Container height adaptive */. Dotbox. Close,.dotbox. open,.dotbox.opened. Open{Display:None;} /* Default Expand Hide button Hidden, expand when expand button hide */. dotbox.is-truncated. open,.dotbox.opened. Close{Display:Inline-block;} /* Out of the specified number of lines expand button Display, expand after button display */. Dotbox {Line-height:18px;Height:36px;Color:#333;}. More-btn{Display:Block;Color:#333;Line-height:18px;}
. Toggle{display:block;}

JS Code

<script type= "Text/javascript" >
$ (function () {
var $dot = $ ('.Dotbox‘);
$dot. Append (' <a class= ' toggle "><span class=" more-btn open "> View all </span><span class=" more-btn Close > Collect </span></a> ');
function Createdots () {
$dot. Dotdotdot ({
After: ' A.toggle '
});
}

function Destroydots () {
$dot. Trigger (' destroy ');
}
Createdots ();
$dot. On (
' Click ',
' A.toggle ',
function () {
$dot. Toggleclass (' opened ');
if ($dot. Hasclass (' opened ')) {
Destroydots ();
} else {
Createdots ();
}
return false;
}
);
})
</script>

Method of skipping text beyond the set number of lines