html文本溢出样式,css样式--文字溢出 换行或者不换行

1.解决文字溢出

在最大的view中设置宽度以及一些参数{ width:200px; height:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

直接用粗体

.font1 {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3; // 控制多行的行数

-webkit-box-orient: vertical;

}

在写WEB前端代码时，有些CMS会能按照意愿控制字数多少，在自适应页面设置的时候就方便了，使用CSS样式

p.title{ width:200px; height:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

第三句是文字超过了规定的宽度高度则隐藏，虽然对搜索引擎没什么影响，但对用户不友好，造成阅读障碍，影响点击。

第四句text-overflow属性，规定当文本溢出包含元素时发生的事情。有三个属性

clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

用户水电费回老家阿萨德肯定是

20210305 解决文字溢出不换行

.msg-text{

width: 90%;

/* margin: 20rpx; */

display: inlinAe-block;

margin-left: 30rpx;

overflow-wrap:break-word;

white-space: normal;

}

.msg-textarea{

background-color: #4CD964;

height: auto;

width: 95%;

white-space: wrap;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1000; // 控制多行的行数

-webkit-box-orient: vertical;

}

56465464654354354sdf3435ad4fd5s3453f43ds435d4fa54fd6s54324sa32d1324as3d45ad4s5asd