CODEWITHSUNDEEP
htmlcssborder
Fast Arrows
Fast Arrows

Reputation: 329

How to make border as big as text in it

So it looks like this:enter image description here

this is the example code of a message:

.allMsg {
  width: 100%;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
</div>

How can i make the border as big as the text inside ... I thought the padding was going to work but unfortunately it didn't so please help me.

Upvotes: 1

Views: 1867

Answers (3)

Pooia
Pooia

Reputation: 51

Though, this question is quite old, but I'll give my very simple solution - I don't know why nobody pointed to this.

Add width: fit-content to the elements you want - in this case .self and .friend

.allMsg {
  width: 100%;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* just add this portion to your code */
.chatMsg {
  width: fit-content;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
</div>

More about these property values can be found in this StackOverflow question

Upvotes: 0

Bal&#225;zs Varga
Bal&#225;zs Varga

Reputation: 1856

It's possible if you wrap your messages inside another element. So let's say all messages have a full-width element, but friends messages will aligned to the left and have a blue background, while yours will aligned to the right and have a green background. If you don't want to change your markup so much, the easiest is to wrap your messages inside a span, than you doesn't need to change anything else in your html.

.allMsg {
  width: 100%;
}

.self span, .friend span {
  border-radius: 1rem;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.self span {
  background-color: #28a745;
}

.friend span {
  background-color: #2845a7;
}

.self {
  text-align: right;
}

.friend {
  text-align: left;
}
<div class='allMsg'>
  <p class='chatMsg friend'>
    <span>hello</span>
  </p>
  <p class='chatMsg self'>
    <span>hy</span>
  </p>
  <p class='chatMsg friend'>
    <span>how are you friend?</span>
  </p>
  <p class='chatMsg self'>
    <span>i'm fine thanks</span>
  </p>
</div>

Upvotes: 2

j08691
j08691

Reputation: 207861

You could use flexbox on the container:

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

Example:

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
  <p class='self chatMsg'>This is a test</p>
</div>

Upvotes: 1

Related Questions