Make text have line break within div

Question

Make text have line break within div

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need to make the text inside the div of the txt class have a line break. Here is the code example that 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

asked by anonymous 29.12.2016 / 19:44

2 answers

0

 is just for this. You can also separate contents with display:block using  , assigning a class exclusively for this. If one of these ways loses formatting, it is because your CSS has already come "loaded". I recommend you clean up their CSS and then customize again to make sure there is no framework or css file doing what you do not need.

29.12.2016 / 19:59

Universal Selector Does Not Work [duplicate] configuring EntityFramework C # and SQL Server [closed]

score 1 · Accepted Answer

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

EDIT:

Within class .autocomplete-suggestion has white-space: nowrap that is preventing automatic line wrap. Please remove it.

The correct thing is to use  as @Citton 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>