Mozilla Firefox solution

Add:

display: inline-block;

to the style of your td.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

The previous paragraph applies to Opera in a similar way.

The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

a {
  display:inline-block;
  word-wrap: break-word;
}

a {
  width:100px;
  word-wrap: break-word;
  display:inline-block;
}

<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

P.S. div are display:block; as default by user-agent.

white-space: nowrap will prevent word-break from taking effect. Some templates apply white-space: nowrap which necessitates overriding this attribute with white-space: normal.

If you set it to display: inline-block and give it a max-width, it will break the word for you. You'll also need to remove the white-space: nowrap on the code element in your CSS, or disable it for your specific code.link class, by adding white-space: normal.

You could also use, word-wrap: break-word;

.wrapper .right{
  display: block;
  width:200px;
}
.wrapper .right{
  word-wrap:break-word;
}

If word-wrap: break-all don't work, try also add this:

white-space:normal;

work for me with the .btn class in Bootstrap 3

Here is another version of using table:

<div class="break-word-container">
    very_long_word_without_spaces
</div>

and here are the styles:

.break-word-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}

<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:

It seems to work fine:

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
  overflow-x: auto;
}

<div class="txt">
The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments.
</div>

Did you "inspect" your div to see if some other css rule is messing the thing?

When you hit F12 in your browser and then select your div either by clicking on it (1 or 2), you'll see what styles are applied to it in 3.
You'll likely see word-break: break-all; or the same with word-wrap because it is overriden by some other rule.

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.