alex_ok83

можно по разному, как интереснее:
1. фон - картинка
2. серые элементы - какие то элементы дома (дивы) с определенными стилями - transform, они находятся внутри контейнера с overflow: hidden и имеют абсолютное позиционирование по отношению к нему

caret-color : #FF0000;

верстку письма лучше делать таблицей, абсолют может не везде работать - ну и надо проверить на разных почтовых ящиках - как письмо отображается

https://codepen.io/alex-dev-tlt/pen/yLVWdmQ - у тебя контейнер сдвинут (отцентрирован, а ты это не учитывал в своих расчетах)

у нас в проекте ипользуется для этих целей миксин (less), куда передаем количество строк, если не влезает, последняя обрежется с многоточием.. собственно тут все понятно, надеюсь ответил на вопрос
.longTextWithTransfers(@countLine: 2, @fontSize: 16px, @lineHeight: 20px, @fw: 400) {
.text-style(@fontSize, @lineHeight, @fw);
max-height: @lineHeight * @countLine + 4px;
-webkit-line-clamp: @countLine;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
word-break: break-word;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}

попробуй задать
body {
overflowx: hidden;
max-width : 100% или 100vw
}
тем самым ты не дашь растягивать тело документа

я сделал проще

<div class="col-xs12">
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
</div>
<div class="col-xs12">
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
<div class="col-md-4">Новость</div>
</div>

у меня та же проблема, но класс row я в слайдере не использую