CODEWITHSUNDEEP
htmlcss
Berke
Berke

Reputation: 91

Word-wrap: break-word not working in <small> or any other element

So I have a code like this. But the word-wrap is not working. It works when I change it to div but I need small, or any other element. So any ideas why it's not working and not breaking the word?

 <small style="width: 15px; word-wrap: break-word;">+{{$s->type }} {{$s->name}}</small>

<small style="width: 15px; word-wrap: break-word;">asfasfassaasfdffgdfgd</small>

www.ibb.co/mkaKrw this is how it looks in my project. So I want that words to break and go down. I dont need inline-block. So i want that, "Tılsımı" word to break. I'm not sure if the thing I want is possible but, I just wanted to ask css experts.

Upvotes: 0

Views: 4662

Answers (2)

Johannes
Johannes

Reputation: 67738

<small> is an inline element by default, which won't take on any settings that refer to block elements, like width. So if you still want to keep it and have the width setting work, you have to convert it to a block or inline-block element by adding display: block or display: inline-block. I added background colors in the snippet below to make it more obvious.

<small style="width: 15px; word-wrap: break-word;display:block;background:green;">+{{$s->type }} {{$s->name}}</small>

<small style="width: 15px; word-wrap: break-word;display:inline-block;background:yellow;">asfasfassaasfdffgdfgd</small>

Added after comments:

I suppose you have a situation like this:

.container {
  width: 90px;
  border: 1px solid #ccc;
}

.container small {
  word-wrap: break-word;
}
<div class="container">
  <p>This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words. This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words. This is a text that contains some <small>veeeeeeeeeeeerrrrrry</small> long words.</p>
</div>

Here the width applies to the container, not to small, small is only around the long words and contains the word-break property, so it's the only place where words can break:

Upvotes: 3

Alexander Z
Alexander Z

Reputation: 604

You just need to add the property "display:inline-block", see the snippet:

 <small style="width: 15px; word-wrap: break-word; display:inline-block">+{{$s->type }} {{$s->name}}</small>

<small style="width: 15px; word-wrap: break-word; display:inline-block">asfasfassaasfdffgdfgd</small>

Upvotes: 0

Related Questions