Windows Outlook - automatic tag wrapping feature

My goal is to ensure that buttons wrap properly inside their cell. I have set a max-width for the cell as well as a ghost table of 200px. The width should not extend past 200px, causing the span to wrap to the second row automatically. This method works everywhere except for Windows Outlook.

I have also tried using <v:rect>, but without a defined width, it doesn't work. How can I make sure my list of spans wraps correctly in Windows Outlook?

<table width="100%" style="border-spacing:0; vertical-align: top;width:100%; max-width:200px;display: inline-block;" role="presentation">
   <tr>
      <td style="vertical-align: top;font-size: 12px; margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
         Area |
      </td>
      <td style="vertical-align: middle;text-align:left;">                                             
         <!--[if (gte mso 9)|(IE)]>
            <table width="100%" style="border-spacing: 0;" role="presentation">
            <tr>
            <td width="180" valign="top" style="padding: 0;">
         <![endif]-->
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  AB
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
               
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  CDEF
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
               
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  GHI
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
         <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
         <![endif]-->
      </td>
   </tr>
</table>

The expected look can be viewed here: https://i.sstatic.net/LQtFR.png (it displays correctly on Mac OS Outlook and other clients but not Windows Outlook).

However, this is the actual result: https://i.sstatic.net/2IzsV.png

htmlcssemailoutlookhtml-email

Answer №1

To ensure your design works properly in Outlook, you will need to utilize aligned ghost tables and ensure proper spacing between buttons.

By using a table structure like the one shown below, wrapping each individual span element, you can achieve the desired outcome:

<!--[if mso]><table align="left" role="presentation"><tr><td><![endif]-->
  <span class="area" style="...">...</span>
<!--[if mso]></td></tr></table><![endif]-->

It's important to note that setting a width on a table cell while also setting the table width to 100% may not yield the expected results. When there is only one cell, it's more effective to set the width on the table itself rather than on the cell.

Although setting the width on the cell may work with a 100% table width, inconsistencies in rendering can occur across different platforms. To avoid any issues, stick to setting the width on the single-column table or remove the 100% width and declare the width directly on the table cell.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

javascripthtmlarraysangulartypescript

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Seeking advice on how to improve the functionality of my website. Currently, the domain I'm focusing on serves as a landing page, redirecting users to another site for purchases. I've built a separate website for this domain in order to establis ...

htmlcssiframecart

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

What is the process for including id parameters within the URL of an HTML page?

As I work on building a website with ReactJS and webpack, I encounter the need to access URL parameters. One specific challenge I face is creating a universal blog post view page that can be dynamically loaded based on the blog id parameter in the URL. Rat ...

javascripthtmlreactjs

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

htmlcssflexbox

Retrieving data from a specific field within a table cell

Why does the value of the select box not get passed in my form scope when it is within its own table cell, but works when the whole form is in a single table cell? Below are examples of working and non-working code: WORKING <tr> <td> ...

htmlformsselect

Unable to stop the default form submission in Vue 3

Using the latest version of Vue 3 I am encountering an issue with preventing form submission. Here is my HTML form: <form id="app" @submit="onSubmit"> <input type="text"> <input type="text"> ...

javascripthtmlvue.js

In the Textarea feature of Summernote, certain words are automatically turned into hyperlinks

When using the Textarea feature in Summernote, I have noticed that if I type words with a colon (:) such as 'i:am' or 'you:are', and then press Enter or Space bar, it automatically creates a hyperlink... However, this only seems to hap ...

jqueryhtmlsummernote

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

htmlcssangularcss-selectorspseudo-element

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

The animation of the background color over an image appears glitchy when viewed on Safari

I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have ...

htmlcsssafaricss-animations

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

javascriptjqueryhtmlbackbone.js

Is it possible to toggle all parent targets in Bootstrap?

When trying to showcase my point, I believe it is best demonstrated by visiting Bootstrap documentation at https://getbootstrap.com/docs/4.0/components/collapse/ and viewing the "multiple targets section." In this section, you will find three buttons: togg ...

javascriptcss

Using Vue to bind a class attribute with multiple Tailwind classes

I am attempting to associate an attribute and multiple tailwind classes with an HTML element. This is specifically for a tab menu where the goal is to dynamically display the title of the "active" tab and apply additional tailwind classes to modify the app ...

javascriptcssvue.jstailwind-css

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

jquerycssanimationwebscroll

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

jqueryhtmlcss

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

javascripthtmlflaskserver-sent-eventseventsource

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

javascripthtmlcss

Is it possible to include a hidden default option that provides a description for my `select` tag?

Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...

jqueryhtmlcss

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

htmlangularhtml-parsing