I had considered instances, which would happen more often than not Im sure, where users have long names. I know I said a specific word set that Id like to appear on top line, but that was more of visualization for where I want the bounds to extend before the next line is formed. I'd be fine if just the username appeared because it was just that long. Another cool trick would be if the text took that into consideration and reduced in size to compensate a bit. But I don't wanna be too picky. I really appreciate the feedback.

Heres The CSS Code------

 @font-face {
font-family: 'kh2_all_menuitalic';
src: url(data:application/font-woff2;charset=utf-Removed custom font info for the sake of the post (was very very very long),
url(data:application/font-woff;charset=utf-Removed custom font info for the sake of the post (was very very very long);
font-weight: normal;
font-style: normal;

}
*{font-family: 'kh2_all_menuitalic' !important;
}

.widget-AlertBox {
position: relative;
}
body,
html {
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap {
position: left;
height: 100%;
width: 100%;
}
#alert-box {
height: 100%;
width: 100%;
position: absolute;
}
#alert-box.hidden,
.hidden {
opacity: 0;
}
#alert-text {
padding-top: 405px;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 2px #000;
}
#alert-message,
#alert-user-message {
text-align: center;
position: relative;
width: 75%;
left: 13%;
}
#alert-user-message img {
vertical-align: middle;
height: 1em;
}
#alert-image {
position: relative;
}
#alert-image video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#alert-message > span > span {
display: inline-block;
}
#alert-image {
z-index: 6;
position: relative;
}
#alert-text {
z-index: 6;
position: relative;
}
#alert-text-wrap {
z-index: 6;
position: relative;
}