Html 元素未收缩以适合换行文本

块大小不得大于所需大小

我需要避开红线右边的空间

.item{
显示器：flex；
对齐项目：居中；
}
.项目图标{
宽度：40px；
高度：40px；
边界半径：50%；
背景颜色：绿色；
右边距：20px；
}
.项目案文{
外形：1px纯绿色；
字体大小：20px；
最大宽度：100px；
}

洛雷姆·阿莫雷姆

使用

分词

属性，如：

.item-text {
  word-break: break-all;
}

请看下面的代码片段：

.item{
显示器：flex；
对齐项目：居中；
}
.项目图标{
宽度：40px；
高度：40px；
边界半径：50%；
背景颜色：绿色；
右边距：20px；
}
.项目案文{
外形：1px纯绿色；
字体大小：20px；
最大宽度：100px；
单词break：打破一切；
}

洛雷姆·阿莫雷姆

您遇到的问题只是CSS在包装文本时如何工作

您可以通过在希望中断发生的位置添加

标记来避免该问题

大概是这样的：

.item{
显示器：flex；
对齐项目：居中；
}
.项目图标{
宽度：40px；
高度：40px；
边界半径：50%；
背景颜色：绿色；
右边距：20px；
}
.项目案文{
外形：1px纯绿色；
字体大小：20px；
最大宽度：100px；
}

洛雷姆a
莫雷姆

文本不受我控制，您需要在没有
@HovsepMiskaryan的情况下工作。这不是您需要的。您可以发布一张图片来显示您的问题吗？我想这仍然是不可能的，请看这里