Html 使文本扩散到div的边缘

我想让绿色div“header text wrap”中的文本整齐地展开到div的边缘。我知道它可以与字母间距和单词间距命令一起工作，但我担心这样做的兼容性（如果某些浏览器显示的字体大小稍有不同，则文本的大小可能会不正确，或者会添加另一行不需要的内容）。如果使用“对齐”命令，则只有顶行的间距完全正确，而不是下面的行

如果没有固定的div宽度以及单词和字母间距，是否可以实现这一点

谢谢你的帮助

@charset“UTF-8”；
/*CSS文档*/
身体{
背景色：#F6F7C1；
填充：0px；
边距：0自动；/*对齐内容以接触边缘；取消边缘和内容之间的默认间距/边距*/
}
/*标题*/
#收割台包装{
背景：#6ECFF；
宽度：100%；
高度：自动；
边框底部：3px实心#CCC；
/*保证金：0自动；是否需要*/
}
#收割台顶部{
/*包含徽标和标题文本*/
宽度：960px；
高度：自动；
边距：0自动；/*居中对齐*/
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题顶部内容包装{
宽度：自动；
高度：自动；
边框底部：1px实心#ccc；
填充：15px 0 10px 0；
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题文本换行{
宽度：460px；
高度：自动；
文本对齐：对齐；
浮动：左；
背景：#090；
}
.页眉徽标包装{
宽度：190px；
高度：100px；
文本对齐：对齐；
浮动：左；
右侧填充：30px；
}
#收割台底部{
/*包含导航菜单*/
宽度：960px；
高度：自动；
边距：0自动；/*居中对齐*/
填充：10px 0 10px 0；
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题导航链接{
宽度：自动；
高度：自动；
浮动：左；
右边距：50px；
字体大小：20px；
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
颜色：#333；
}
.标题导航链接结束{
宽度：自动；
高度：自动；
浮动：左；
右边距：0px；
字体大小：20px；
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
颜色：#333；
}
/*字体*/
标题{
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
字体大小：45px；
文本转换：大写；
线高：40px；
颜色：#000；
}
口号{
字体系列：courier new、tahoma、Arial、Cambria、serif；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
字体大小：20px；
文本转换：大写；
字间距：10px；
字母间距：5px；
颜色：#666；
}

___________________________
文本的第一行和第二行
标语也在这里
家
关于
服务
接触
身体

将这些CSS声明添加到您的

标题文本包装中

类：

text-align: justify;  
-moz-text-align-last: justify; /* For Firefox */
text-align-last: justify;

像这样：

@charset“UTF-8”；
/*CSS文档*/
身体{
背景色：#F6F7C1；
填充：0px；
边距：0自动；/*对齐内容以接触边缘；取消边缘和内容之间的默认间距/边距*/
}
/*标题*/
#收割台包装{
背景：#6ECFF；
宽度：100%；
高度：自动；
边框底部：3px实心#CCC；
/*保证金：0自动；是否需要*/
}
#收割台顶部{
/*包含徽标和标题文本*/
宽度：960px；
高度：自动；
边距：0自动；/*居中对齐*/
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题顶部内容包装{
宽度：自动；
高度：自动；
边框底部：1px实心#ccc；
填充：15px 0 10px 0；
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题文本换行{
宽度：460px；
高度：自动；
文本对齐：对齐；
浮动：左；
背景：#090；
文本对齐：对齐；
-moz text align last:justify；/*用于Firefox*/
文本最后对齐：对齐；
}
.页眉徽标包装{
宽度：190px；
高度：100px；
文本对齐：对齐；
浮动：左；
右侧填充：30px；
}
#收割台底部{
/*包含导航菜单*/
宽度：960px；
高度：自动；
边距：0自动；/*居中对齐*/
填充：10px 0 10px 0；
/*下图将div居中对齐（垂直和水平）*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题导航链接{
宽度：自动；
高度：自动；
浮动：左；
右边距：50px；
字体大小：20px；
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
颜色：#333；
}
.标题导航链接结束{
宽度：自动；
高度：自动；
浮动：左；
右边距：0px；
字体大小：20px；
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
颜色：#333；
}
/*字体*/
标题{
字体系列：Arial、无衬线字体、tahoma、Arial、Cambria；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
字体大小：45px；
文本转换：大写；
线高：40px；
颜色：#000；
}
口号{
字体系列：courier new、tahoma、Arial、Cambria、serif；
-webkit字体平滑：抗锯齿；/*子字体使字体更平滑*/
字体大小：20px；
文本转换：大写；
字间距：10px；
字母间距：5px；
颜色：#666；
}

___________________________
文本的第一行和第二行
标语也在这里
家
关于
服务
接触
身体

这可能会有帮助：字体大小需要固定，文本对齐（底线也对齐）只对齐第一行