當(dāng)我們?cè)诓季种惺褂肨ext展示文本內(nèi)容時(shí)，如果父布局是固定寬高，當(dāng)Text展示的內(nèi)容過(guò)長(zhǎng)并且沒(méi)有限制時(shí)，會(huì)超出父容器，這點(diǎn)和安卓中是不一樣的，安卓中會(huì)自動(dòng)截取超出部分。
因此我們?cè)陂_(kāi)發(fā)過(guò)程中，如果Text內(nèi)容長(zhǎng)度不固定，我們要提前設(shè)置好邊界，以防內(nèi)容超出。
以下是展示及解決辦法：
演示.png
@Entry
@Component
struct test{
build() {
Column({space:10}){
Row(){
Column(){
Text('HarmonyOS開(kāi)發(fā)者筆記')
Row(){
Text('有一部分超出去父容器了，但是被下面的擋住了')
}.width('100%').height('100%').backgroundColor(Color.Blue)
}.height('100%').width(100).backgroundColor(Color.Grey)
Row(){
Text('關(guān)注')
Text('HarmonyOS開(kāi)發(fā)者筆記？？？？？？？？？？？？？超出了')
}.width('100%').height('100%').backgroundColor(Color.Yellow)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height(100)
Row(){
Column(){
Text('HarmonyOS開(kāi)發(fā)者筆記')
Row(){}.width('100%').layoutWeight(1).backgroundColor(Color.Pink)
}.height('100%').width(100).backgroundColor(Color.Green)
Row(){
Text('充滿dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd下邊又超出去了？').width('70%')
Text('HarmonyOS開(kāi)發(fā)者筆記又被擋住了？？？？？？？？？？？？？？？？？？')
}.layoutWeight(1).height('100%').backgroundColor(Color.Yellow)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height(100)
Row(){
Text('HarmonyOS開(kāi)發(fā)者筆記HarmonyOS開(kāi)發(fā)者筆記HarmonyOS開(kāi)發(fā)者筆記')
.width(50).height(100)
Text('關(guān)注1關(guān)注2關(guān)注3關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注關(guān)注')
.width(50).maxLines(4)
}.width(300).height(100).backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceBetween)
}
}
}
總結(jié)：
1.Text父容器在Column/Row內(nèi)時(shí)，如果想充滿剩余空間要使用layoutWeight(1)，設(shè)置width('100%') 有可能超出父容器，這樣Text也有可能超出布局
2.當(dāng)Text父容器寬高正常顯示時(shí)，如果Text內(nèi)容長(zhǎng)度不能確定，我們需要指定Text的寬和最大行數(shù)這兩個(gè)參數(shù)，這樣就可以避免內(nèi)容超出父容器了
