What are effective ways to design a dialogue or conversation with CSS styling?

Question

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology:

I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw

.container  {
  width: 600px;
 }
.speaker {
  padding-right: 20px;
}

.speaker::after {
  content: ':';
 }

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

css

Answer 1

Answer №1

If you're looking to avoid overlapping the .speaker and .sentence elements, try implementing the following solution:

I've utilized display: flex on the .line to ensure they are positioned next to each other.

.container {
  width: 600px;
}

.speaker {
  padding-right: 10px;
}

.speaker::after {
  content: ':';
}

.line {
  display: flex;
}

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

Answer 2

If you're looking to avoid overlapping the .speaker and .sentence elements, try implementing the following solution:

I've utilized display: flex on the .line to ensure they are positioned next to each other.

.container {
  width: 600px;
}

.speaker {
  padding-right: 10px;
}

.speaker::after {
  content: ':';
}

.line {
  display: flex;
}

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

Answer 3

Answer №2

If you aim to have all character names neatly aligned, your best choice would be either a traditional table or a modern CSS grid. Using a grid can provide more flexibility, so those with expertise in grids may suggest alternative solutions. Below is an example of achieving this layout with a table. Remember, you can apply table display styles to non-table elements for semantic purposes.

.dialogue {
  border-spacing: 0;
}

.dialogue th, .dialogue td {
  padding: 0 0 1em 0;
  vertical-align: top;
}

.dialogue th {
  text-align: right;
  white-space: pre;
}

.dialogue td {
  text-align: left;
}

<table class="dialogue">
  <tr class="dialogue-alice">
    <th>Alice Bob: </th>
    <td>Culpa eiusmod qui enim Lorem quis aliquip Lorem id. Incididunt velit fugiat irure tempor ad culpa officia. Laborum magna dolor consequat ipsum aute eiusmod ad eu aute enim magna id non esse. Laborum mollit labore aute consectetur culpa cupidatat. Excepteur esse tempor proident reprehenderit minim duis. Irure eu ullamco ex non dolore sit duis consectetur eu enim officia cillum.</td>
  </tr>
  <tr class="dialogue-bob">
    <th>Charles Dickens: </th>
    <td>Anim duis laboris commodo mollit incididunt et cupidatat anim aliquip ipsum pariatur veniam. Sint amet esse et esse ea ea consequat ea. Dolore fugiat id et qui esse et ullamco sunt elit velit id.</td>
  </tr>
</table>

Answer 4

If you aim to have all character names neatly aligned, your best choice would be either a traditional table or a modern CSS grid. Using a grid can provide more flexibility, so those with expertise in grids may suggest alternative solutions. Below is an example of achieving this layout with a table. Remember, you can apply table display styles to non-table elements for semantic purposes.

.dialogue {
  border-spacing: 0;
}

.dialogue th, .dialogue td {
  padding: 0 0 1em 0;
  vertical-align: top;
}

.dialogue th {
  text-align: right;
  white-space: pre;
}

.dialogue td {
  text-align: left;
}

<table class="dialogue">
  <tr class="dialogue-alice">
    <th>Alice Bob: </th>
    <td>Culpa eiusmod qui enim Lorem quis aliquip Lorem id. Incididunt velit fugiat irure tempor ad culpa officia. Laborum magna dolor consequat ipsum aute eiusmod ad eu aute enim magna id non esse. Laborum mollit labore aute consectetur culpa cupidatat. Excepteur esse tempor proident reprehenderit minim duis. Irure eu ullamco ex non dolore sit duis consectetur eu enim officia cillum.</td>
  </tr>
  <tr class="dialogue-bob">
    <th>Charles Dickens: </th>
    <td>Anim duis laboris commodo mollit incididunt et cupidatat anim aliquip ipsum pariatur veniam. Sint amet esse et esse ea ea consequat ea. Dolore fugiat id et qui esse et ullamco sunt elit velit id.</td>
  </tr>
</table>

Answer 5

Answer №3

Feel free to test out this code snippet

If you want to implement it using flexbox, I recommend familiarizing yourself with flexbox through this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: table;
}
.message-row {
  display: table-row;
}
.user,
.message {
  display: table-cell;
  text-align: left;
}

<table style="width:100%">
  <tr>
    <td>Mary </td>
    <td>: Hello</td> 
  </tr>
  <tr>
    <td>Luke</td>
    <td>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</td> 
  </tr>
</table>

 <hr>
<div class="parent">
  <div class="message-row">
    <div class="user">Mary</div>
    <div class="message">: Hello</div>
  </div>
  <div class="message-row">
    <div class="user">Luke</div>
    <div class="message">: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</div>
  </div>
</div>

Answer 6

Feel free to test out this code snippet

If you want to implement it using flexbox, I recommend familiarizing yourself with flexbox through this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: table;
}
.message-row {
  display: table-row;
}
.user,
.message {
  display: table-cell;
  text-align: left;
}

<table style="width:100%">
  <tr>
    <td>Mary </td>
    <td>: Hello</td> 
  </tr>
  <tr>
    <td>Luke</td>
    <td>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</td> 
  </tr>
</table>

 <hr>
<div class="parent">
  <div class="message-row">
    <div class="user">Mary</div>
    <div class="message">: Hello</div>
  </div>
  <div class="message-row">
    <div class="user">Luke</div>
    <div class="message">: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</div>
  </div>
</div>

What are effective ways to design a dialogue or conversation with CSS styling?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to verify an iCheck located on the following page

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Activate all chosen CSS circles

Animate an svg icon to follow a designated path as the user scrolls

The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

Creating an inverted curve or border-radius for a div element is a design technique that can add

The Google Language Translator disregards the formatting

Problem with aligning divs in Bootstrap

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

Combining CSS and JS files for accordion list - experiencing issues when used separately

Adjusting the color of text based on the fulfillment of a condition

Ways to create a back-and-forth transition across a sequence

How can we achieve a seamless fade transition effect between images in Ionic 2?

Prevent web browsers from interpreting media queries

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

Utilize CSS Steps to incorporate the initial position

ways to change the font color style of a header element using css

modify the appearance of HTML controls in real time with C#

What is the best way to make sure the background color of a container stretches across the full width of the screen?

What is the best way to have gulp monitor my sass file updates and generate a single css file?