Content editable div reduce line spacing

**keyboard** · 02-08-2012, 09:09 AM

Hello everyone,

This is my code

HTML Code:

<HTML>
<HEAD>
</HEAD>
<BODY STYLE="overflow:hidden; margin:0px; background-color:grey;">
<DIV ID="oDiv" CONTENTEDITABLE STYLE="height:60%; background-color:white; overflow:auto; width:30%; line-height:10%;"> 
</DIV>
</BODY>
</HTML>

Is there any way to remove the giant spacing between each line in the div?
I've tried css line-height.
Keyboard1333

**jscheuer1** · 02-08-2012, 01:59 PM

Firefox 'gets it right' IE inserts a p for each line break from the enter key, Firefox a br tag. You can use style in the head of the page to 'fix' IE, or just don't hit the enter key unless you want a new paragraph.

The 'fix':

Code:

<style type="text/css">
#oDiv p {
	margin: 0;
}
</style>

Full demo:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
	height: 100%;
}
body {
	overflow: hidden;
	margin: 0px;
	background-color: gray;
}
#oDiv {
	height: 60%;
	background-color: white;
	overflow: auto;
	width: 30%;
}
#oDiv p {
	margin: 0;
}
</style>
</head>
<body>
<div id="oDiv" contenteditable></div>
</body>
</html>

**keyboard** · 02-08-2012, 09:27 PM

Thanks jschuer1

Thread: Content editable div reduce line spacing

Thread Tools

Search Thread

Content editable div reduce line spacing

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions