I have a slightly complicated situation, where I need to hide/remove some spans from the document.
I cannot use {display:none;} because this transforms the span into a block element, and this in turn causes issues with spaces appearing around the removed item.
Other approaches such as {width:0;} which require a block display also cause an errant space to appear (the document a very very complicated and verbose markup, with index items abutting footnote references etc.)
The only solution I have found which successfully 'removes' the element without causing a space to appear is {font-size:0;}
(details here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
Unfortunately, font-size:0; causes an increase in the line height in the following line of the document.
a) is there any other way to hide inline items?
b) is there any fix for this line-height glitch?
Sample HTML showing the line height glitch:
I cannot use {display:none;} because this transforms the span into a block element, and this in turn causes issues with spaces appearing around the removed item.
Other approaches such as {width:0;} which require a block display also cause an errant space to appear (the document a very very complicated and verbose markup, with index items abutting footnote references etc.)
The only solution I have found which successfully 'removes' the element without causing a space to appear is {font-size:0;}
(details here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
Unfortunately, font-size:0; causes an increase in the line height in the following line of the document.
a) is there any other way to hide inline items?
b) is there any fix for this line-height glitch?
Sample HTML showing the line height glitch:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font size zero test</title>
<style>
p { font-size: 10pt; line-height: 5mm; }
.hideMe { font-size:0; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute<span class="hideMe">irure dolor</span> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Edited by adriencater
