Child element exceeding parent element

Asked

Viewed 211 times

3

I have a child element that is mounted dynamically, the contents of this element can sometimes be long, it makes such element exceed the parent as in the following example:

Parent Element:

margin: 5px 30px 10px 40px;

Elemento Filho:

$("#divcritica").append("<div id='divvalorcontabil"+ divvalorcontabil +"' class='operacao btn btn-info dashed-black-border' value='ValorContabil/"+marcados+"' style='margin:3px; 0px; 0px; 5px; box-shadow: rgb(0, 0, 0) 1px 1px 7px -2px; border-radius: 3px; border: 2px;' ondblclick='removeButton(this)' onclick='setClass(this)'></div>");

Upshot:

inserir a descrição da imagem aqui

How can I adjust so that it does not exceed the parent element?

Note: The content of this element is variable.

css

2 answers

2

Apply two CSS properties to the button (class .btn):

.btn{
   word-break: break-all;
   white-space: normal;
}

This will make the text occupy only the space of the button, making line break if necessary.

The word-break: break-all; will break long strings that do not fit the width of the widget. And white-space: normal; is to change the default value of Bootstrap, which uses nowrap (no line break) in the class .btn.

If you do not want to globally change the native class .btn Bootstrap, you can create a custom class and add on button:

.quebralinha{
   word-break: break-all;
   white-space: normal;
}

Note: If your CSS is being loaded before the .css of Bootstrap, you will have to use !important after the value of properties to "undo" the Bootstrap CSS effect. Ex.: white-space: normal !important;

Example:

.btn{
   word-break: break-all;
   white-space: normal !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
   PlanejamentoegestãodeprogramaseprojetossocioambientaisPlanejamentoegestãodeprogramaseprojetossocio ambientais
</div>

2

Boy I’m not gonna tell you how to solve the problem, so there are 1000 ways to solve it. I’ll tell you why you’re having this problem! It’s because of that class btn of the Bootstrp you’re using on div

The btn class has the property white-space: nowrap; she doesn’t let her text break

inserir a descrição da imagem aqui

One of the ways to solve and exchange nowrap for pre-wrap

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


  
  <div class='operacao btn btn-info dashed-black-border' style="white-space: pre-wrap;" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi amet ab eos qui earum est exercitationem voluptatibus error autem eum temporibus culpa, optio natus accusamus deserunt accusantium at sed recusandae reiciendis vero quas nihil praesentium? Fugiat doloribus cumque molestiae quis ipsum nesciunt, repellendus expedita veritatis odit alias fugit aliquid ea excepturi provident possimus culpa tempora delectus itaque. Deleniti ex debitis eligendi quam, ea voluptatibus rem velit eius rerum sapiente, earum commodi dolorem laborum ipsa enim ab hic assumenda dolores autem quia, voluptates corporis exercitationem. Aliquid impedit quae est non neque? Debitis repellendus dolores, soluta quam nam quisquam doloremque necessitatibus eos!</div>

  • Do not use pre-wrap because it adds line break before the element. And yet, this property alone does not break the text.

  • @Sam maybe I got it wrong Sequences of white space are preserved. Lines are broken in new line characters, in <br> and when necessary to fill the lines of boxes (boxes). Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space and I saw it preserves line breaks, spaces, <br> and yes it wraps http://prntscr.com/p5qn0v

  • Testing here, in addition to not breaking the text, still adds a <br> before it: https://i.stack.Imgur.com/4HxNv.png

  • In fact, the correct print is this: https://i.stack.Imgur.com/N6oud.png ... the other print has the word-break that breaks the text.

  • @Sam here on Win10 and Chrome did not add BR no, in addition to his question he uses a div and not a http://prntscr.com/p5qq75 button

  • Does not add a <br> in DOM, it adds a line break at the beginning of the element, as if it were a <br>. Either div or button, the effect is the same. The question is that your answer does not solve the problem :X

  • The pre-wrap it’s still mt bad because it keeps the spaces as they are in the source code, as if it were a tag <pre></pre>.

  • @Sam, what if he wants to preserve the spaces? He did not say how he wanted to render the text, and as I said here he did not add any space before the text http://prntscr.com/p5qu1i

  • It is because you did not indent the text in the div, put everything in the same line, but try to do so for you see: https://i.stack.Imgur.com/pRcuf.png .. in short, the pre-wrap is not good for this. It will render HTML as if it were a WYSIWYG.

  • 1

    @Sam doesn’t even have it in the AP code. So we can have more than one answer and it’s up to him to choose which one looks best for his particular case. Abs

  • 1

    I used the pre-rep in my son element, it worked perfectly, respect the padding of the parent element.

  • @Victorhenrique cool young, good that worked there, in CSS almost always there is more than one way to do the same thing. Success

Show 7 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.