CODEWITHSUNDEEP
htmlcss
wahoowa
wahoowa

Reputation: 368

How to properly break words with two <span> elements?

I want to create a chatbox where there are two <span> elements, one that holds the username and one that holds the message. In the case of a long word in the message, I want to break to the next line, but I am getting some undesirable behavior with the two spans, separated by a colon. See the example below.

Example

Notice "Username A" sends a long message that needs to be broken on to the next line. However, "A," which part of their username, is broken into the next line. I want it to look more like the message of "UsernameC", where the line is filled to the end of the chat box as far as it can go before breaking onto a new line. The message span is separated using margin-left, so I am suspecting the string of characters "A:longlonglonglonglonglonglong" is being treated as one word, leading to unintended behavior. I do not wish to add any unnecessary spaces after the username or before the message to try to work around this problem. What would be a better way to go about achieving my desired behavior?

.chatbox {
  outline: 1px solid;
  width: 200px;
  margin-bottom: 10px;
}

.message {
  overflow-wrap: break-word;
}

.text {
  margin-left: 5px;
}
<div class="chatbox">
  <div class="message">
    <span class="username">Username A</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">Username B</span>:<span class="text">long long long long long long long</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">UsernameC</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

Fiddle

Upvotes: 0

Views: 904

Answers (2)

Laurel
Laurel

Reputation: 6173

Replace all the spaces in the usernames with non-breaking spaces: Username&nbsp;A. This preserves the behavior you had for B and obviously C (which has no spaces).

.chatbox {
  outline: 1px solid;
  width: 200px;
  margin-bottom: 10px;
}

.message {
  overflow-wrap: break-word;
}

.text {
  margin-left: 5px;
}
<div class="chatbox">
  <div class="message">
    <span class="username">Username&nbsp;A</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">Username&nbsp;B</span>:<span class="text">long long long long long long long</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">UsernameC</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

Upvotes: 0

Alohci
Alohci

Reputation: 82966

Instead of overflow-wrap: break-word use line-break: anywhere.

.chatbox {
  outline: 1px solid;
  width: 200px;
  margin-bottom: 10px;
}

.message {
  line-break: anywhere;
}

.text {
  margin-left: 5px;
}
<div class="chatbox">
  <div class="message">
    <span class="username">Username A</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">Username B</span>:<span class="text">long long long long long long long</span>
  </div>
</div>

<div class="chatbox">
  <div class="message">
    <span class="username">UsernameC</span>:<span class="text">longlonglonglonglonglonglong</span>
  </div>
</div>

Upvotes: 2

Related Questions