So whenever I code a new Tumblr theme from scratch the post body always adds unwanted padding to the top and the bottom of the caption/body of the post. This does not occur in quote posts and chat posts, but occurs in text, photo, photoset, video, and audio posts. I'm guessing it's something Tumblr does automatically for you, because when I tested a similar code it worked fine and didn't add the extra padding on the top and bottom. How can I fix this problem? Thanks for the help!
HTML:
<div id="holder">
<div class="post">
<div class="body">
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words
</div>
</div>
<div class="post">
<div class="body">
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words
</div>
</div>
CSS:
#holder {
position: relative;
margin: 40px auto 0 auto;
padding: 20px;
width: 400px;
height: 500px;
background: red;
}
#holder .post {
margin-bottom: 20px;
padding: 20px;
background: green;
}
Tumblr test blog
Are you sure you're talking about padding? I believe what you actually mean is the initial margin the browsers have set for paragraphs (so called User Agent Styles). You can simply remove it like this:
p {
margin: 0;
}
But to keep some space between the paragraphs, you can do this:
p {
margin-top: 0;
margin-bottom: 20px;
}
Related
This question already has answers here:
How to word wrap text in HTML?
(20 answers)
Closed 3 years ago.
I want to wrap words at a defined position.
In Germany, we have sometimes very long words which are composed out of several nouns. I would like to wrap such long composed words at the boundaries of two words if the word is too long and a word wrap is necessary.
For example, we have the word "Unternehmenskunden" which means corporate (Unternehmens) customer (Kunde). I want that this word would break into "Unternehmens" and "kunde". I tried to wrap the two word parts into there own spans but that did not affect the wrap. The CSS classes word-break and word-wrap doesn't have a value for that.
I tried to wrap a space into its own span and remove it with display: none or shrink it with width: 0;
Is there maybe some kind of hidden character which marks a word break but doesn't
Here is a fiddle which could help illustrate what I try to achieve and what I tried so far: https://jsfiddle.net/nbk9ptay/3/
Thanks to #GrumpyCrouton I found a solution for an arbitrary word wrap.
The solution is to use either a soft hyphen () if you want to have a hypen in case of a word wrap How to word wrap text in HTML?:
<div style="width: 120px; border: 1px solid red;">Unternehmenskunde</div>
<div style="width: 200px; border: 1px solid red;">Unternehmenskunde</div>
Or to use html entity if you don't want a hypen in case of a word wrap How to word wrap text in HTML?:
<div style="width: 120px; border: 1px solid red">Unternehmenskunde</div>
<div style="width: 200px; border: 1px solid red">Unternehmenskunde</div>
Use inline-block spans to wrap sub words.
Then you have a delineation you can control. It's up to you how the separation gets styled. Using inline-block, just by the nature of HTML you will get a complete long word when there's enough width, and a split double-line when broken down.
Also, if it helps, here's a post touching on truncation and scaling font-size.
Codepen
.container {
width: 250px;
}
.subword {
display: inline-block;
}
<div style="width: 800px; border: 1px solid black; margin-bottom: 4em;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>
<div style="width: 100px; border: 1px solid black;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>
Browser is replacing Multiple space between words to the single space in html page. for e.g if my text is 'AB-DC 3' in Browser its showing 'AB-DC 3'. Inspect window its showing 2 spaces 'AB-DC 3'.
you can also try out yourself. just inspect element and add multiple spaces in word of any line check.
is there any solution for this??
Similar question answered cause, but not explaining how to resolve this.
Whitespace is non-significant by default, and is compacted down to a single space when rendered.
CSS can change that: white-space: pre-wrap will provide the default line-wrapping functionality that you would expect, plus the significant-whitespace behaviour of preformatted text. Best of both worlds!
<pre>AB BA</pre>
pre tag will also solve your problem
On the Op scenario:
Use white-space:pre; (no wrap except at <br>) or white-space:pre-wrap; (wrap when needed).
Example:
body{
margin: 0;
}
div {
width: 200px;
height: 100px;
}
#a {
white-space:pre;
background: gold;
}
#b {
white-space:pre-wrap;
background: skyblue;
}
<div id=a>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
<div id=b>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
Single White spaces:
Sometimes you need to use single spaces, like at the start of a sentence (when it is ignored). In situations like this, the best choice is to use instead.
Example:
p:nth-of-type(1) {
font-size: 2em;
background: tomato;
}
p:nth-of-type(2) {
font-size: 2em;
background: greenyellow;
}
<p> content</p>
<p> content</p>
To avoid changing your style of display.
Better to use style:
<style>
{ white-space: pre;}
</style>
If you give so many spaces in html it is of no use because browser will consider only one you have to use space entity the no. of times you type this entity browser will so that much spaces
HTML:
<p>He llo</p>
It will show exact 4 spaces in the work
Here is the fiddle link https://jsfiddle.net/yudi/zrqrfw98/
I'm trying to do line-clamping and that is the example of what it is.
So it happened that in my application instead of whitespaces " ",   are being generated.
The thing is when I try to do this, the first line is displayed ugly because in that line phrase is being divided into two words. And in my main project I can't do anything about   vanishing.
So is there any CSS solution to make it look good?
Here's the codepen.
HTML
<div class="container-fluid">
<div class="col-md-4">
<div class="jumbotron">
<div class="row description">
<p>
Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words Some words
</p>
</div>
</div>
</div>
</div>
CSS
$font-size: 14px;
$line-height: 1.3;
$lines-to-show: 8;
.description {
display: block;
display: -webkit-box;
height: $font-size*$line-height*$lines-to-show;
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.jumbotron p {
font-size: 14px;
margin-bottom: 0;
}
.container-fluid {
margin: 30px 60px;
.jumbotron {
background-color: #00FFFF;
padding: 0;
}
}
The one thing I would suggest is for you to use:
text-align: justify;
This will stretch the text for being full width of the container.
The solution would be of using text-align: justify;, but the problem of space button generating might be the same than I'm having occasionally.
If seems like the Google Chrome browser in some situations uses the instead of the regular whitespace. Using a different browser might work off in the future.
EDIT: There is the non-CSS solution for exactly what you're seeking to solve, just use this original topic reversely.
I want to display a short text-align-centered sentence like this.
<p style="font-size: 13px; text-align: center; width: 600px;">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
What happens now is that, because of the width, the last two words "lines long" fall on the next line of the paragraph. In a centered alignment this looks rather ugly. My current method of solving this is to manually insert a break in the right place.
<p style="font-size: 13px; text-align: center; width: 600px;">
This is a variable-length sentence which is sometimes<br/>only a few words and sometimes up to three lines long.
</p>
This is a variable-length sentence which is sometimes
only a few words and sometimes up to three lines long.
This becomes tiring to do all the time. Is there a way in HTML do this automatically? So basically to first let a "p" element determine the minimum number of lines it needs to show the text, and then to shrink it horizontally as much as possible, while keeping the same number of lines?
The closest you can get with CSS is text-align: justify;
p {
font-size: 13px;
text-align: justify;
}
p#first {
width: 100px;
}
p#second {
width: 150px;
}
<p id="first">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>
<p id="second">
This is a variable-length sentence which is sometimes only a few words and sometimes up to three lines long.
</p>
I want to indent my text for a website I am making in html. I don't want to keep typing &nsbp; four times. I know there is a way to do this, but I'm not sure how. Thanks!
If you are just looking to indent the first line, it's
p {
text-indent: 4em; /* or 15px, or 5%, 2rem or 3vw */
}
You could easily apply this to a div or whatever you want.
If you are looking to indent all lines, you of course will want padding-left: 4em;
There are quite a few ways to indent text in html. Here are a few that come to mind:
<blockquote>test</blockquote>
<p style="margin-left: 15px;">text</p>
<p style="text-indent: 15px;">Only first line</p>
text
<pre> text</pre>
<ul style="list-style: none;"><li>text</li>
<table width="100"><td></td><td>Ewww</td></table>
<dl><dd>text</dd></dl>
<span style="width: 10px; display: hidden;"></span><span>text</span>
You can see the result at: http://jsfiddle.net/2My4b/5/
text-indent can indent the first line of text, in a paragraph or a div.
It can be used like this:
<element selector> {
text-indent: <how much>;
}
If you want to indent all lines, use padding, like this:
<element selector> {
padding: <how much>;
}