单行文本和多行文本溢出以省略号显示方式分分

作者:分分快三计划

<style>

css实现多行文字限制显示,css实现多行文字

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<title>css实现多行文字限制显示</title>

<style>

#test {

display:

box;

display: -webkit-box;

box-orient: vertical;

-webkit-box-orient: vertical;

line-clamp: 2;

-webkit-line-clamp: 2;

overflow:

hidden;

text-overflow:

ellipsis;

}

</style>

</head>

<body>

<p id="test">多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示</p>

</body>

</html>

!DOCTYPE html html head meta charset = "UTF-8" meta name ="viewport" content ="width=device-width, initial-scale=1, maximu...

.intowline{
display: -webkit-box !important;
overflow: hidden;         //多行显示溢出以省略号显示方法
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.inaline{
overflow: hidden;
white-space:nowrap;   //单行显示溢出以省略号显示方法
text-overflow: ellipsis;
}

}

分分快三计划 1

</head>

div{
float:left;
width:200px;
height:100px;
border:1px solid #ff0000;
}
</style>
<body>
<div class="inaline">我激发健康是福就开始放假啊分开发健康房间爱咖啡就爱看剪发卡双方均埃里克</div>
<div><p class="intowline">爱咖啡就我激发健康是福就开始放假啊分开发健康房间爱咖啡就我激发健康是福就开始放假啊分开发健康房间爱咖啡就爱看剪发卡双方均埃里克</p></div>
</body>
</html>

text-overflow:

 

     解决方案:关闭autoprefixer然后再开启并注释掉

display:

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<p id="test">多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示多行文字限制显示</p>

</style>

line-clamp: 2;

-webkit-line-clamp: 2;

overflow:

   /*

<!DOCTYPE html>

ellipsis;

<meta charset="UTF-8">

<body>

  /* autoprefixer: off */  

  -webkit-box-orient: vertical;

box;

单行文本和多行文本溢出以省略号显示方式分分快三计划。     编译的时候,默认会过滤-webkit-box-orient: vertical;导致多行文本省略显示不生效

  */

</body>

单行文本和多行文本溢出以省略号显示方式分分快三计划。 #test {

hidden;

<html>

<meta name="format-detection" content="telephone=no">

display: -webkit-box;

box-orient: vertical;

<title>css实现多行文字限制显示</title>

</html>

  /* autoprefixer: on */ 

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 HTML和CSS