I want to use <pre></pre> to keep the format of input text, but the displayed text crosses the boundary of its parental tag<div></div>. How to solve this problem?

Question

The text in <pre></pre> steps beyond the boundary of its parental <div></div>. How to solve this problem?

It is said that the line lengths in the preformatted text can be shortened, but how to do it?

I have seen

<%# DataBinder.Eval(Container.DataItem, "Comments")
               .ToString().Replace("\n", "<br />") %>

Is it c#? I am a PHP programmer.

Answer 1

Try adding CSS:

pre {
  width: 100%;
  overflow: auto;
}

Answer 2

You can use CSS to make the text wrap:

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

If you don't want the text formatting changed at all, this CSS will use scrollbars to make all of the text viewable anyway:

pre {
  width: 100%;
  overflow: auto;
}