Make text have line break inside the div

Asked

Viewed 48,417 times

1

Good need to make the text that is within the class div txt has line break. Follow the example of the code I have to change.

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.material-icons.large { 
    font-size: 6rem; 
    width: 6rem;
    overflow: hidden;
}

.autocomplete-suggestions {
  text-align: left;
  cursor: default;
  border-top: 0;
  background: #FFFFFF;
  position: absolute;
  max-height: 254px;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.autocomplete-suggestion {
  position: relative;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.02em;
  color: #484848;
  border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
  float: left;
  width: 100px;
  height: 100%;
  border-right: 1px solid #D7D7D7;
  background: #FFFFFF;
  margin-right: 15px;
}
.autocomplete-suggestion .img img {
  width: 100px;
  height: 100px;
}
.autocomplete-suggestion .txt {
  padding: 10px;
  width: 100%;
  height: 100%;
}
.autocomplete-suggestion .txt div {
  width: 100%;
  font-weight: bold;
}
.autocomplete-suggestion b {
  color: #0091FF;
}
.autocomplete-suggestion.selected {
  background: #EDEDED;
  border-right: 7px solid #0091FF;
}
<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
  <div class="autocomplete-suggestion">
    <div class="img"><i class="material-icons large">face</i>
    </div>
    <div class="txt">
      <div>DES NIVEA ROLL-ON FEM. SENSITIVE & PURE 50ML</div>
      TEXTO EXTRA
    </div>
  </div>
</div>

css

3 answers

3


A simple white-space: normal in div will solve the problem.

EDIT:

Within the class .autocomplete-suggestion has a white-space: nowrap which is preventing automatic line breaking. Remove it.

The right thing to do is to use <p> as @Cleiton mentioned. <div> does not correctly handle text directly.

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material-icons.large {
    font-size: 6rem;
    width: 6rem;
    overflow: hidden;
}
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border-top: 0;
    background: #FFFFFF;
    position: absolute;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.autocomplete-suggestion {
    position: relative;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #484848;
    border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
    float: left;
    width: 100px;
    height: 100%;
    border-right: 1px solid #D7D7D7;
    background: #FFFFFF;
    margin-right: 15px;
}
.autocomplete-suggestion .img img {
    width: 100px;
    height: 100px;
}
.autocomplete-suggestion .txt {
    padding: 10px;
    width: 100%;
    height: 100%;
}
.autocomplete-suggestion .txt div {
    width: 100%;
    font-weight: bold;
}
.autocomplete-suggestion b {
    color: #0091FF;
}
.autocomplete-suggestion.selected {
    background: #EDEDED;
    border-right: 7px solid #0091FF;
}
<!-- Material Icons (Google) -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion">
        <div class="img"><i class="material-icons large">face</i>
        </div>
        <div class="txt">
            <p>DES NIVEA ROLL-ON FEM. SENSITIVE & PURE 50ML</p>
            TEXTO EXTRA
        </div>
    </div>
</div>

  • In its form it worked, but when the text is very large the vertical line that this side of the icon does not accompany the div 'autocomplete-suggestion', has how to solve this? I tried to use the '<p>' but it skipped a line and was not organized.

  • Create a Jsfiddle with large text for me to see. When to p not get organized, I believe you can change the margin to solve.

  • ok, I put 'width: 300px;' inside the autocomplete-suggestion to simulate the ok error. follow the link: https://jsfiddle.net/kpa997tn/

  • I did a gambiarra just to know if you want: https://jsfiddle.net/kpa997tn/1/

  • I sent you the wrong link, the right one and this one:https://jsfiddle.net/kpa997tn/2/ . I noticed that you put a fixed size, it worked but the windows will not have the same size, because it depends on the size of the text.

  • That’s why :) How about creating another question with this problem? In the future you can help other people.

  • I have just done this: http://answall.com/questions/174237/comordeixar-linha-vertical-do-tamanho-da-div

Show 2 more comments

0

The <p></p> serves exactly that. You can also separate the contents with display:block using <span></span>, assigning a class exclusively for this. If one of these forms loses formatting, it is because your CSS already came "loaded". I recommend you clean up their CSS and then customize it again, to make sure there’s no framework or css file doing what you don’t need.

  • Even using the <p> instead of <div> the content does not break line yet.

  • I found the reason why <p> not break the line, I put in my answer.

-2

<p style="white-space: pre-line;">
  DES NIVEA ROLL-ON FEM. SENSITIVE & PURE 50ML TEXTO EXTRA
</p>

Browser other questions tagged css

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