Текст из
выходит за границы

Question

Текст из <p> выходит за <div>. Пробел поставить не могу, текст отрисовывается из массива JS, white-space не работает.

Нужно чтобы картинка слева всегда оставалась одного размера, а текст, по хорошему, сам переносился.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.list-flex {
  display: flex;
  flex-wrap: wrap;
}

.list__profile {
  display: flex;
  width: 33.333%;
  text-align: center;
  margin-bottom: 10px;
  border: 1px solid black;
}

.list__profile-descr {
  width: 50%;
}
.list__profile-descr p {
  margin-bottom: 5px;
}
.list__profile-descr p:nth-child(2n + 1) {
  font-weight: 700;
}

.list__profile-img {
  width: 50%;
}
.list__profile-img p {
  font-weight: 700;
}

<div class="list__profile">
  <div class="list__profile-img">
    <img src="img/profile.jpg" alt="">
    <p>${iterator.company.name}</p>
  </div>
  <div class="list__profile-descr">
    <p>Name</p>
    <p>${iterator.name}</p>
    <p>Mail</p>
    <p>${iterator.email}</p>
    <p>Address</p>
    <p>${iterator.address.street + ' ' + iterator.address.suite}</p>
    <p>Phone</p>
    <p>${iterator.phone}</p>
  </div>
</div>

Answer 1

let arr = [{
  name: "Петров Василий Петрович",
  email:"[email protected]",
  address :{
    street: "Украина, Киевская обл, г. Киев, ул. Иванова, д. 55, кв 1",
    suite: "хз"
  },
  phone: "+380678888888",
  company: { name: "Самая лучашая компания в мире" }
}];

arr.forEach(iterator => {
  $(".list__profile").append(`<div class="list__profile-img">
    <img src="https://www.prikol.ru/wp-content/uploads/2017/10/kartinki-04102017-001.jpg" alt="">
    <p>${iterator.company.name}</p>
  </div>
  <div class="list__profile-descr">
    <p>Name</p>
    <p>${iterator.name}</p>
    <p>Mail</p>
    <p>${iterator.email}</p>
    <p>Address</p>
    <p>${iterator.address.street} ${iterator.address.suite}</p>
    <p>Phone</p>
    <p>${iterator.phone}</p>
  </div>`);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.list-flex {
  display: flex;
  flex-wrap: wrap;
}

.list__profile {
  display: flex;
  width: 33.333%;
  text-align: center;
  margin-bottom: 10px;
  border: 1px solid black;
}

.list__profile-descr {
  width: 50%;
}
.list__profile-descr p {
  margin-bottom: 5px;
  word-wrap: break-word;
}
.list__profile-descr p:nth-child(2n + 1) {
  font-weight: 700;
}

.list__profile-img {
  width: 50%;
}
.list__profile-img p {
  font-weight: 700;
  word-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__profile">
  
</div>

БЛОГ НА HUSL

Текст из
выходит за границы

Ответы (1 шт):

БЛОГ НА HUSL

Текст из выходит за границы

Ответы (1 шт):

Текст из
выходит за границы