CSS force line break on container extension

Question

What i have:

HTML:

<div class="container">
    <div class="text">
        Some long text
    </div>
    <div class="extendable">
        <img>
    </div>
</div>

CSS:

.container {
    float: right;
    min-width: 10em;
    padding-left: 1em;
    .text {
        padding: 0.3em;
    }
}

Every block has dynamic width and height.
http://jsfiddle.net/vZ4eA/

What i want:
.text shouldn't be able to extend .container if the content gets too big. There should be a forced line break.
.extendable on the other hand should make container bigger if the content exceeds the width (behave normally).

in case the `.container` gets wide, do you want the `.text` to also get wider to fill it horizontally? — Ejaz, Apr 16 '13 at 13:54
@Ejay yes `.text` should extend aswell if `.container` gets really wide. — Miiller, Apr 16 '13 at 14:01

What have you tried · Answer 1 · 2013-04-16T14:01:31.837

1

You can use a max-width for the text along with nowrap

.text{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;

}

Working Example

EDIT:

To respond to one of the comments below, the max-width should probably be a dynamic value in order to work with the dynamic width of the container. You could easily implement this behavior with javascript or jQuery

jQuery

I recommend you check out this plugin to handle the re-sizing of your div

$("#div").resize(function(e){
    $(".text").css({"max-width" : $(this).css("max-width") });
});

edited Apr 16 '13 at 14:01

answered Apr 16 '13 at 13:49

What have you tried

11,018
4
31
45

Then it will still extend if `.container` is smaller than this max width and won't if `.extendable` is bigger than that. – Miiller Apr 16 '13 at 13:57
@NikoM. I've edited, is this what you wanted? If not please let me know. – What have you tried Apr 16 '13 at 16:59
The result is surely what i wanted. The thing is, that i do not want to use javascript for initial styling adjustments. Especially for simple stuff like that... – Miiller Apr 16 '13 at 17:26
@NikoM. You don't need to use javascript to style, only to dynamically change. There is no way around that ... – What have you tried Apr 16 '13 at 18:09
If there is a way around it or not depends if i can manage to find a css solution for the desired behaviour. I am currently trying some things out with the Attributes `display` `position` and `float`. If i cannot find a solution and there is no CSS geek comming up with a workaround i guess i will have to go with the js solution. I don't like such 'dirty' coding though... – Miiller Apr 16 '13 at 18:23
@NikoM. Using `js` is not an *ugly* solution by any means. It may be different to what you're used to, but nearly every website today uses js to handle dynamic CSS. – What have you tried Apr 16 '13 at 18:24
If there is no other way around it is fine, i agree, but you also wouldn't set a fixed height for a text-block and then change it with javascript if it exceeds it, would you? – Miiller Apr 16 '13 at 18:33

score 1 · Accepted Answer · edited May 23 '17 at 10:30

You need to set a fixed width on .text and then use word-break:break-all;

Using jQuery you can set the width of .text to be that of .extendable.

 var exWidth = $('.extendable').css('width');
 $('.text').css('width', exWidth);

http://jsfiddle.net/vZ4eA/16/

Edit: CSS Only

You could try placing .text inside .extendable.

See here: http://jsfiddle.net/vZ4eA/18/

EDIT 2: CSS:

With some help from this answer https://stackoverflow.com/a/7231607/1399670 I have updated the fiddle to match your requirements.

http://jsfiddle.net/vZ4eA/20/

score 0 · Answer 3 · answered Apr 16 '13 at 13:53

0

The only method I can think applicable here would be to set max-width on .text

answered Apr 16 '13 at 13:53

Ian Wood

6,515
5
34
73

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

You'd probably have to dynamically update the max-width of .text as .container resizes; specifically, on page load, and on viewport resize. You can do this using jQuery.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 16 '13 at 13:57

Adrian

42,911
6
107
99

CSS force line break on container extension

4 Answers4