Sounds like what you want to do is apply a format that uses word-wrap and preserves white-space. The easiest way to do that is to use the wrap plugin, but instead of using
<WRAP prewrap><code>stuff
</code></WRAP> I'd suggest you create a custom wrap class. (see the Wrap plugin documentation).
When you use the prewrap code method you get the white background, mono text, padding, and shadowbox that you don't want - and you lose the ability to use DokuWiki formatting.
1. Create a custom wrap class. There's an example below.
2. Create another class to disable the white background, padding, mono text, and shadowbox used for pre when the pre element is within your custom wrap class. There's an example below.
When you want to document your phone call just type your notes. A single hit of the
Enter key will create a new line that will render as such in DokuWiki. White-spaces are respected. Resizing the page will wrap on white-spaces (while still respecting them). If you use one of more spaces to start a new line or paragraph it will format as your custom wrap class instead of using the default CSS for pre. Wrap the document in
<WRAP $CustomClassName>stuff
</WRAP> and you should have the formatting you desire.
-----------------------------------------
/conf/userstyle.css
.dokuwiki div.wrap_call {
background-image: url(/business/lib/tpl/business/images/phone.png); /*change this to the path to your image of a phone*/
white-space: pre-wrap;
word-wrap: normal;/* for IE < 8 */
margin: 1em auto;
border: 1px solid #ccc;
font-size: 1em !important;
padding: .7em 1em;
border-radius: 2px;
box-shadow: inset 0 0 .5em #ccc;
min-height: 40px;
background-position: 10px 10px;
background-repeat: no-repeat;
overflow: auto;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #A4C0E4 !important; /* change this to the colour you want */
vertical-align: middle;
}
.dokuwiki div.wrap_call pre{
background-color: #A4C0E4 !important; /* should be the same colour as used in the custom wrap class */
border: 0px;
border-radius: 0px;
font-family: OxygenSans; /* force this to the font you want */
padding: 0em;
box-shadow: 0 0;
}
-----------------------------------------[/color]
Example DokuWiki code:-
<WRAP call>
some text with lots and lots and lots of fairly boring words repeated until I get some sort of decent line length lots and lots of times because I'm too lazy to do otherwise. A new line.
This is the new line. That was four spaces. That was three spaces. That was ten spaces.
This is a new paragraph.
This is a new paragraph indented one space. And that was three spaces. That was four spaces. That was ten spaces.
* DokuWiki list item
This is a new line after a list item
This is a new paragraph
Four spaces at the start of a new paragraph.
New line created by hitting Enter once.
</WRAP>
[/color]
Example rendered on a large screen
Same example rendered on a 320x640 viewport