-
|
What version of Tailwind CSS are you using? latest CDN, I can't determine the version from looking at the source What build tool (or framework if it abstracts the build tool) are you using? not sure... zola with https://github.com/cx48/BelResume , which has a <script src="https://cdn.tailwindcss.com"></script>in the head element but no reference to What version of Node.js are you using? What browser are you using? What operating system are you using? Reproduction URL https://play.tailwindcss.com/zKX31gnKC0 Describe your issue Sometimes there's a non-breaking space after a |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 9 replies
-
|
https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/ |
Beta Was this translation helpful? Give feedback.
-
|
Seems to be because you have whitespace after the opening |
Beta Was this translation helpful? Give feedback.
-
|
Yep, so there's no spaces/tabs after the opening |
Beta Was this translation helpful? Give feedback.
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ul li, whitespace</title>
</head>
<body>
<ul>
<li>
Arbeit an UI von Scook, ein Messenger und Communityplatform, der später
als T-Online Messenger rebrandet wurde, nachdem die Firma insolvent
ging.
</li>
<li>Projektleiter eines Mole-whacking Spiels</li>
<li>
Entwurf bzw. Neugestaltung der Webseite der Firma zusammen mit
Marketingleuten und Grafikdesignern
</li>
</ul>
</body>
</html>Whitespace is not rendered by default |
Beta Was this translation helpful? Give feedback.
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ul li, whitespace</title>
<style>
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
/* 4. Add accessible line-height */
line-height: 1.5;
/* 5. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/*
10. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
</style>
</head>
<body>
<ul>
<li>
Arbeit an UI von Scook, ein Messenger und Communityplatform, der später
als T-Online Messenger rebrandet wurde, nachdem die Firma insolvent
ging.
</li>
<li>Projektleiter eines Mole-whacking Spiels</li>
<li>
Entwurf bzw. Neugestaltung der Webseite der Firma zusammen mit
Marketingleuten und Grafikdesignern
</li>
</ul>
</body>
</html>With CSS reset. Whitespace is not rendered. |
Beta Was this translation helpful? Give feedback.
-
|
I'd say it is a deviation in Firefox relative to Chrome with regards to So in reference to your original Play, I'd remove |
Beta Was this translation helpful? Give feedback.
I'd say it is a deviation in Firefox relative to Chrome with regards to
list-style-position: inside: https://jsfiddle.net/4wpuLso1/So in reference to your original Play, I'd remove
list-insideand increase the left padding instead: https://play.tailwindcss.com/zYxORvWt8u