CODEWITHSUNDEEP
css
Murtuza Z
Murtuza Z

Reputation: 6017

CSS styling to display word properly in span

I have used below template to generate HTML, Now the problem is when I resize the window then text in the span not showing correctly, In given screenshot "aborted" word is broken down in two lines which not what I expected. How do I fix this issue?

   template: _.template([
      '<div class="notes">',
      '<label class="control-label"><%=label%>:</label>',
      '<span><%=text%></span></div>'
    ].join("\n"))

CSS:

.notes {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  display: block;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size: 12px;
  line-height: 1.42857;
  margin: 0 0 10px;
  overflow: auto;
  padding: 5px 10px;
  word-break: break-all;
  word-wrap: break-word;
}

div.notes label.control-label {
  min-width: 0px;
}

Below is Screenshot from my HTML page.

This is span and word is breaking when I resize the window

Upvotes: 3

Views: 70

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

It looks like you have white-space set to pre-wrap. You need to check if the whole code is injected inside <pre> or you need to reset the white-space property by:

span {white-space: normal;}

Upvotes: 1

Related Questions