CODEWITHSUNDEEP
htmlcss
Leo3942
Leo3942

Reputation: 1

Text for chat interface overflowing - CSS

I searched everywhere, but almost no-one seems to take this into account. I have a chat interface, its a div element, within it a ul, then inside that are li which contains p elements.

html:

.chatRight {
  background-color: lightgrey;
  font-size: 30px;
  padding: 5px;
  border-radius: 6px;
  max-width: 50%;
  word-wrap: break-word;
  text-align: right;
  margin-left: auto;
  display: table;
}
.chatLeft {
  background-color: aqua;
  font-size: 40px;
  padding: 5px;
  border-radius: 6px;
  max-width: 60%;
  word-wrap: break-word;
}
.chatBoxRight {
  text-align: right;
  word-wrap: break-word;
}
.chatBoxLeft {
  text-align: left;
  word-wrap: break-word;
}
#chatList {
  width: calc(100% - 80px);
  list-style-type: none;
  max-width: calc(100% - 80px);
}
#chatList li {
  margin-top: 5px;
  margin-bottom: 5px;
}
<div id="chatContainer">
  <ul id="chatList">
    <li class="chatBoxLeft">
      <p class="chatLeft">Hello there!</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">Good day</p>
    </li>
    <li class="chatBoxLeft">
      <p class="chatLeft">How do you do?</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhaaaaaaaaaaaaaaa</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </li>
  </ul>
</div>

Now the problem is the overflowing, everything seems nice and blobby, except for aaa..., cause it makes the rounded p overflow. It's not just this, but the max-width also does not seem to be working in cases.

(For the sake of demonstration I just added the display:table to the right-box p elements.

Thanks in advance.

Upvotes: 0

Views: 623

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Remove display: table; from .chatRight, or use word-break: break-all; instead of word-wrap: break-word;

.chatRight {
  background-color: lightgrey;
  font-size: 30px;
  padding: 5px;
  border-radius: 6px;
  max-width: 50%;
  word-wrap: break-word;
  text-align: right;
  margin-left: auto;
}
.chatLeft {
  background-color: aqua;
  font-size: 40px;
  padding: 5px;
  border-radius: 6px;
  max-width: 60%;
  word-wrap: break-word;
}
.chatBoxRight {
  text-align: right;
  word-wrap: break-word;
}
.chatBoxLeft {
  text-align: left;
  word-wrap: break-word;
}
#chatList {
  width: calc(100% - 80px);
  list-style-type: none;
  max-width: calc(100% - 80px);
}
#chatList li {
  margin-top: 5px;
  margin-bottom: 5px;
}
<div id="chatContainer">
  <ul id="chatList">
    <li class="chatBoxLeft">
      <p class="chatLeft">Hello there!</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">Good day</p>
    </li>
    <li class="chatBoxLeft">
      <p class="chatLeft">How do you do?</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhaaaaaaaaaaaaaaa</p>
    </li>
    <li class="chatBoxRight">
      <p class="chatRight">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </li>
  </ul>
</div>

Upvotes: 1

justtry
justtry

Reputation: 639

you just need to add word-break: break-all; to change when line breaks

https://jsfiddle.net/nqp685h1/

Upvotes: 1

Related Questions