Forums / Cotonti / Skins / Как красиво поступить с "лишними" буквами и словами ?

Для начала закомментируй блоки .forum_date, .admin и div_thanks. Вернешься к ним потом.

Правила для div.about:

.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 flex: 0 0 15rem;
}

Правила для div.message:

.message {
 background-color: #2E3342;
 padding: 1rem;
 flex-grow: 1;
}

Текст в блоке .about теперь будет спокойно переноситься. Почему не переносился раньше -- почитай про flex и посмотри на свои начальные правила.

У родителя достаточно будет:

.forum_post {
	display: flex;
	background-color: #2F3342;
	border-color: #3f4f5f;
	border-radius: 20px 8px 8px 0;
	box-shadow: 5px 3px 15px #00000080;
	opacity: 1.0;
	transition-duration: 0.5s;
	transition-property: box-shadow, opacity;
	transition: 200ms;
	margin: 30px 0;
}

.forum-date и .admin проще перенести в блок .message. .div_thanks -- в .about. Как вариант -- использовать отдельные рядные flex-блоки для [div.forum-date div.admin], [div.about div.message] и [div.thanks]. Но если посидеть-подумать, можно и с текущей разметкой справиться)

P.S. color для .about указан с ошибкой

давно отказался от бутстрапа

Я его и не начинал пользовать - он убивает скорость любого сайта.

Добавлено 1 минута спустя:

вот полный СSS  ( я понимаю, что там много лишнего.  Я пока его не чистил )

.forum_post
{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #2F3342;
  border-color: #3f4f5f;
  border-radius: 20px 8px 8px 0;
  box-shadow: 5px 3px 15px #00000080;
  opacity: 1.0;
  transition-duration: 0.5s;
  transition-property: box-shadow, opacity;
  transition: 200ms;
  height: auto;
  margin: 30px 0;
  padding: 0;
  min-width: 560px;
}

.forum_post:hover 
{
  box-shadow: 4px 2px 14px #0000004d;
  opacity: 1.0;
}

.forum_date
{
  border-radius: 20px 8px 0 0;
  color: #D2E0A4ff;
  text-align: left;
  font-size: 85%;
  margin: 0;
  padding: 5px 10px 5px 15px;
  height: auto;
  width: 20%; 
}

.admin
{
  border-radius: 20px 8px 0 0;
  background-image: linear-gradient(to right, #2F3342 50%, #3A4053 );
  color: #D2E0A4ff;
  text-align: right;
  margin: 0;
  padding: 5px 10px;
  height: auto;
  width: 80%;
}

.about
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-self: flex-start;
  background-color: #2E3342;
  color: #D2E0A4ff;
  text-align: left;
  margin: 0;
  padding: 10px 0 20px 20px;
  height: auto;
  min-width: 150px;
}

.location_length
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.topic_starter
{
  /*  */
  background: url(../img/author_32.png) no-repeat 50% 50%;
  background-position: 19px;
  width: 52px;
  height: 35px;
  -webkit-filter: drop-shadow(2px 2px 2px #0000007f);
  border-radius: 50%;
  margin-left: 70px;
}


.message
{
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  background-color: #2E3342;
  margin-left: 10px;
  padding: 0;
  height: auto;
  width: 87%;
  justify-content: space-around;
  align-items: flex-start;
  min-width: 420px;
}

.message_body
{
  color:aliceblue;
  align-self: stretch;
/*  min-height: 185px;*/
}

.signature
{
  margin: 5px 5px 10px 5px;
  color: #FFECBE;
  font-size: 85%;
}

.signature_delimiter
{
  /*  border-bottom: 1px solid #a5c29bff;
  border-left: 1px solid #a5c29bff;
  border-right: 1px solid #a5c29bff;
  border-radius: 3px;*/
  background-color: #a5c29bff;
}

.signature_delimiter hr
{
  height: 1px;
  background-color: #404C5Dff;
  border: none;
}

.signature_gold
{
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  margin: 15px 5px 10px 5px;
  color: #FFECBE;
}

.page_description
{
  text-align: center;
  color: #FFECBE;
  margin-bottom: 10px;
}

4-й блок ещё делится на свои Flex блоки.  они не отображены потому, что пользователь не указал в профиле подпись.

5-й тоже делится на подблоки , но с ними всё в порядке