CODEWITHSUNDEEP
htmlcss
Aperture
Aperture

Reputation: 2427

Best html tag to use to display chat text messages?

The text windows needs to have fixed width and length and must auto wrap long texts. It must not have horizontal scroll bar but it needs vertical bar. You can only display text but cannot enter text into it. What html/css to use? I think the preview window in SO's ask question page meets the requirement! It is just a div. How is that done?

Upvotes: 1

Views: 3377

Answers (2)

Thomas Ebert
Thomas Ebert

Reputation: 441

I realize this question is somewhat old, but I think it's an interesting case.

Using a div HTML element is possible, but not the best solution when it comes to semantics. Keep in mind that div is the most generic HTML element. It says nothing about your markup's content other than it should be divided from the rest somehow.

A better approach would be to use a mix of more descriptive HTML 5 elements, and overwrite their default styling with something that looks like a chat bubble.

Consider this example, adapted from this article

<ul class="chat">
  <li class="message">
    <figure class="sender">
      <img src="https://example.org/avatar.png" alt="" class="avatar" />
      <figcaption>Example sender name</figcaption>
    </figure>
    <blockquote>
      <p>Text message</p>
    </blockquote>
  <li>
  <!-- more chat messages ... -->
</ul>

Upvotes: 0

Aamir
Aamir

Reputation: 5440

You can use a simple div to show chat bubbles. I would personally use something simple, such as:

<div class="chat-bubble"></div>

All the content would be wrapped inside that div. I would then style the chat-bubble class in CSS to make it look how I want it to.

Here is a pretty neat walkthrough on making chat bubbles in CSS that should be a good starting point for what you're trying to do.

Upvotes: 1

Related Questions