How to remove first line indent of text in html
Asked Answered
M

1

6

I'm having trouble formatting my output. I want each line of text to be horizontal on the left side. Here is the code I am using.

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
        <c:out value="${snippet.query}"/>
    </code></pre>
</div>

Although the styling calls for the text to be aligned to the left of the div, the first line of output is always indented. Why is this happening? I can't post images yet, but this is what it looks like:

            CREATE SCHEMA "Trading";
SET SCHEMA '"Trading"';
CREATE STREAM "Orders"
(
   orderTime TIMESTAMP,
   orderId INTEGER,
   productId INTEGER,
   quantity INTEGER,
   unitPrice DECIMAL(11,2),
   shippingState CHAR(2)
);
CREATE STREAM Shipments
(
   shipTime TIMESTAMP,
   orderId INTEGER,
   warehouseState CHAR(2)
);  

I notice that if I remove the 'pre' tags I no longer have this issue, but without those tags proper text highlighting does not occur. I'm passing the variable snippet to the jsp like this:

  request.setAttribute("snippet", selectedQuery);

I've tested what this data looks like prior to sending it to the jsp. I observed the variable in System.out.print() and there is NO indentation on the String itself. selectedQuery is an object that holds several String variables.

Thank you for your help.

edit: I've tried using text-indent in the div, pre, and code tags but none of those had any effect.

Mascot answered 22/10, 2014 at 17:38 Comment(0)
A
17

The pre tag includes any white space. You have a bunch of white space between the opening and closing pre tags. Simply remove that and you should be fine :)

Like so:

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
        <c:out value="${snippet.query}"/>
    </code></pre>
</div>

To

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
<c:out value="${snippet.query}"/>
    </code></pre>
</div>
Adalbertoadalheid answered 23/10, 2014 at 18:27 Comment(2)
Thank you! Looks much better.Mascot
For others just to clarify this is white space IN THE HTML which often causes this confusion (aside from whatever may be in the string variable).Serinaserine

© 2022 - 2024 — McMap. All rights reserved.