How to make content fit minimum width, while maximum was set?

Question

When the sentence is too big, there is a lot of white space left when collapsing it.

In the example below the word technician is too big for the div and is forced underneath, leaving a lot of space between appliance and the right border.

Is there a way to fix this with CSS or with jQuery?

problem

DIV Code:

width:28%;
float:left;

fix what???????? you defined the div width, what did u expect to happen? — Flash Thunder, Aug 21 '16 at 14:22
@FlashThunder, mariusz [That won't work.](https://jsfiddle.net/x7hunerv/) — Oriol, Aug 21 '16 at 14:31
There may be a jQuery solution for this, can ask for it and add tag RomanK? — skobaljic, Aug 21 '16 at 14:36
Added jQuery tag, please vote to reopen, we may find the solution. — skobaljic, Aug 21 '16 at 14:40

MNR · Answer 1 · 2016-08-21T14:40:12.830

0

To break a word at any point line wraps then use word-break property of CSS with value break-all.

div {
  float: left;
  with: 28%;
  word-break: break-all;
}

Example:

div {
  background-color: #f00;
  float: left;
  width: 28%;
  word-break: break-all;
}

<div>
  Electrical Appliance Technician
</div>

If you want to hide the extra part with ... so do it like:

div {
  background-color: #f00;
  float: left;
  width: 28%;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div>
  Electrical Appliance Technician
</div>

edited Aug 21 '16 at 14:40

answered Aug 21 '16 at 14:26

MNR

727
1
9
23

that's not an answer imo – Flash Thunder Aug 21 '16 at 14:32

How to make content fit minimum width, while maximum was set?

1 Answers1