indent inside div

pro_ceed1 · Post by **pro_ceed1** » July 9th, 2012, 11:04 pm

Hey everyone,

I'm about to build a web application to show documents in the browser.
For that I get all the necessary data in JSON format, which was created by another application.

But there is one problem:

To display text, I use a div and inside the div I position all the words with the same formatting inside one span tag.

The width of the div is calculated by summing up the width of every character in one line, but in browsers there is a certain indent (see the screenshot), thus the calculated div is too small for all the words and an unwanted line break occurs.

Large image.

Is there any way to remove the indent or to calculate the size of this indent to get the right width for the div?

Thanks in advance for your help!
Steve

jscher2000 · Post by **jscher2000** » July 10th, 2012, 10:24 pm

I don't understand what you mean by "indent." Since you are using absolute positioning, you are already overriding the natural flow of the elements.

Anyway, I doubt you can accurately compute the widths of individual characters across all platforms and configurations. What if you use the offsetWidth of the span?

BruceAWittmeier · Post by **BruceAWittmeier** » July 13th, 2012, 8:59 am

I suspect the container is too small for the given text which is causing the line feed of your text. You might try adding:
overflow: hidden;
to allow the overflow to be hidden - if permissible within your page.

demo page: I thought this would prevent the line feed but I recall a different parameter to maintain the height vs width - might check in the W3Schools.com for settings.
http://gotnarcosis.com/brucewittmeier/t ... tTest.html

This code will provide indented text within a container.

This code may need some tweaking. The editor is not handling the ":" and ";" properly.

Code: Select all

<div style="margin-left: 40px;">devtools.errorconsole.enabled
&lt;&lt;&lt;
set to true
</div>

This works but of course you dont see all the text. Complete code you can experiment with.

Code: Select all

<html>
<head>
<title>TextTest</title>
</head>
<body>
<div
style="border: 1px solid ; position: absolute; left: 0.78742in; width: 0.6625in; height: 0.277778in;"><span
abosolute:="" left:="" top:=""  font-family:="arial"  font-size="" 10pt;="">Text in Box</span>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div
style="border: 1px solid ; overflow: hidden; position: absolute; left: 0.78742in; width: 0.6625in; height: 0.277778in;"><span
abosolute;="" left:="" top:="" 0in;="" font-family:="" arial;=""
font-size="" 10pt;="">Text in Box</span>
</div>
</body>
</html>

Took me a while

but what I think you need is to use width: auto; in the span statement of your div. If this truncates, I believe you can add 1px margin to the left and right margins of the text box container.

indent inside div

indent inside div

Re: indent inside div

Re: indent inside div