1.解決文字溢出
在最大的view中設(shè)置寬度以及一些參數(shù){ 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; // 控制多行的行數(shù)
-webkit-box-orient: vertical;
}
? ?在寫WEB前端代碼時梨熙，有些CMS會能按照意愿控制字?jǐn)?shù)多少操漠，在自適應(yīng)頁面設(shè)置的時候就方便了智亮，使用CSS樣式
p.title{ width:200px; height:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
? ? ? ?第三句是文字超過了規(guī)定的寬度高度則隱藏招狸，雖然對搜索引擎沒什么影響可婶，但對用戶不友好，造成閱讀障礙畅卓，影響點擊尉咕。
? ? ? ?第四句text-overflow屬性，規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情毕匀。有三個屬性
clip 修剪文本 ellipsis 顯示省略符號來代表被修剪的文本 string 使用給定的字符串來代表被修剪的文本
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)铸鹰。 為了實現(xiàn)該效果，它需要組合其他的WebKit屬性皂岔。
常見結(jié)合屬性：
display: -webkit-box; 必須結(jié)合的屬性 蹋笼，將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結(jié)合的屬性 躁垛，設(shè)置或檢索伸縮盒對象的子元素的排列方式 剖毯。
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; // 控制多行的行數(shù)
-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>
