Html 如何在内联块div中将长单词分解成新行

我有下面的例子

第一个和第三个示例的设计是正确的，但我无法找到一种方法来使示例2中的长单词正确地打断单词。有没有一种方法只使用CSS就可以做到这一点

更新：我尝试过使用单词break，但它在IE 10上不起作用。同样值得一提的是，在第三个例子中，应该保持原样

.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：内联块
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.

您可以删除

显示：内联块

和Add可以

显示：block


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
您可以删除
显示：内联块
和Add可以
显示：block


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
必须为内联块元素设置最大宽度


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：内联块；
最大宽度：计算（100%-14px）；//100%-padding
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
必须为内联块元素设置最大宽度


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：内联块；
最大宽度：计算（100%-14px）；//100%-padding
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
添加此属性断字：断字给你.name类


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
/*单词包装：打断单词*/
显示：内联块；
断字：断字；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
添加此属性断字：断字给你.name类


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
/*单词包装：打断单词*/
显示：内联块；
断字：断字；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
只需添加单词break:break all；to.name类。。就这样


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：内联块；
单词break：打破一切；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
只需添加单词break:break all；to.name类。。就这样


.container{
位置：绝对位置；
溢出：隐藏；
宽度：200px；
高度：100px；
边框：2倍实心rgb（64,72,75）；
背景色：rgba（64,72,75,0.14902）；
}
.姓名{
颜色：rgb（255、255、255）；
背景色：rgb（64,72,75）；
填充：0px 7px；
单词包装：打断单词；
显示：内联块；
单词break：打破一切；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
奥雷姆·伊普斯姆·多尔·阿梅特·阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
A.
添加显示：块；在.name类中是将显示属性从内联块更改为b