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;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

<view style="width: 90%;margin: 0 auto;display: flex;flex-wrap: wrap;">

<view style="width: 20%;display: flex;flex-direction: column;align-items: center;">

<image src="../../static/xc.png" style="width: 100rpx;height: 100rpx;"></image>

<text style="font-size: 20rpx;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100rpx;">用户水电费回老家阿萨德肯定是</text>

</view>

</view>

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;

}

<view class="msgleft">

<view class="msg-imgbox"><image class="msg-img" src="../../static/img/feinene/6.gif" mode=""></image></view>

<view class="msg-text"><text class="msg-textarea" >56465464654354354sdf3435ad4fd5s3453f43ds435d4fa54fd6s54324sa32d1324as3d45ad4s5asd</text></view>

</view>