Разрыв строки в таблице html

У меня есть рабочий пример, который я скопировал из определенного дизайна.

Часть скриншота, которую я приложил ниже, в описании проблемы.

Постановка задачи:

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

Разрыв строки в таблице html

Фрагменты HTML-кодов, которые я использовал в скрипте для приведенных выше строк:

  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">when:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>

Может быть, было бы проще добавить таблицу в первый тд и разложить там что-нибудь? CSS в голове не работает должным образом во всех почтовых клиентах. Вы встраиваете это?

— 13.06.2018 23:43

@Syfer Да, я использую встроенный стиль, что касается кодирования электронных писем HTML, мы делаем только встроенные. Можете ли вы обновить в скрипке? Вот самый обновленный рабочий пример

— 14.06.2018 15:40

@Syfer Ты здесь?

— 14.06.2018 17:05

Разместил это как ответ, чтобы вы могли взглянуть на него.

— 14.06.2018 21:22

css html-table html-email line-breaks

13.06.2018 16:04

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 850

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот что я сделал:

Добавить класс line-break к указанному <td>

Вы можете использовать word-wrap: break-word; для многострочного текста в div. word-wrap работает на основе width div.

.line-break {
  word-wrap: break-word;
  width: 300px;
}

<html>
<body>


<p style = "font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<table style = "width:100%;display: flex;
  justify-content: center;">
  
 <tbody style = "font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">type:</td>
	<td style = "padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">what</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">how many</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">when:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;" class = "line-break">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">who:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style = "text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class = "steps" style = "text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

Вот JSFiddle

Спасибо за ответ. Мне интересно, можете ли вы обновить его в скрипке. Так будет легче визуализировать.

— 13.06.2018 16:10

@ user5447339 добавил ссылку на скрипт

— 13.06.2018 16:11

@ user5447339 Каждый раз, когда вы беретесь за скрипку. CTRL-F, вставьте class = "line-break", и он направит вас к вставленному мной классу.

— 13.06.2018 16:12

Мне интересно, знакомы ли вы с кодированием электронных писем HTML? Я обновил ваш рабочий пример. Я использовал ваши коды CSS как встроенный стиль.

— 13.06.2018 16:16

Ты поблизости ?

— 13.06.2018 16:35

@ user5447339 Что вы имеете в виду под кодирование html-писем?

— 13.06.2018 16:56

Позвольте нам продолжить обсуждение в чате.

— 13.06.2018 17:01

13.06.2018 16:09

Я знаю, что на этот вопрос был дан ответ, но вот альтернативный подход к этому.

Примечание: я добавил в ваш код, чтобы показать пример до и после.

Вот рабочий пример того же кода, если он вам нужен.

<html>
<body>


<p style = "font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<!-- new way -->
<table style = "width:100%;">
 <tbody> 
  <tr>
    <td>
        <table style = "width:100%;">
         <tbody> 
          <tr>
           <td width = "50%" align = "right" style = "font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width = "50%" style = "font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width = "50%" align = "right" style = "font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width = "50%" style = "font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width = "50%" align = "right" style = "font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width = "50%" style = "font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
         </tbody>
        </table>
    </td>
	  </tr>
  </tbody>
</table>
<!-- new way -->

<table style = "width:100%;display: flex;
  justify-content: center;">
  
 <tbody style = "font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">type:</td>
	<td style = "padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">what</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">how many</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">when:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
    width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style = "padding-bottom: 3%;text-align:right;">who:</td>
    <td style = "padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style = "text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class = "steps" style = "text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

Ваше здоровье

вы использовали таблицу внутри таблицы? Это правильный подход?

— 14.06.2018 22:31

Причина, по которой я спрашиваю, потому что раньше я не кодировал электронные письма в формате HTML. это не лучший способ?

— 14.06.2018 22:37

Код, который присутствует в моем рабочий пример, написан мной впервые.

— 14.06.2018 22:38

Вы можете использовать вложенные таблицы. Рекомендуется. Это не вопрос предпочтений, его нужно протестировать, чтобы увидеть, как он работает в разных почтовых клиентах. Outlook, например, даст передачу обоих TD внутренних братьев и сестер tr. Так что лучше иметь вложенные таблицы. Преимущество: у вас полный контроль. Недостаток: код немного увеличится.

— 14.06.2018 23:51

Совершенно разумно @Syfer, я дам вам знать, если у меня возникнут вопросы.

— 15.06.2018 04:48

Извините, я имел в виду заполнение Outlook, например, выдаст набивка на обоих внутренних родственниках TD TD. Так что лучше иметь вложенные таблицы.

— 15.06.2018 05:46

14.06.2018 21:22