I understand how negative indent works with CSS, but my question is, is there a way to have a kind of 'tab' in between the beginning of the negative indent and the rest of the text?
What I am trying to accomplish is the same look as in http://copyrighter.ru/canada/test.htm - please have a look at paragraphs starting from [6].
Notice that [6] is moved to the left of the line, while the rest of it looks like a neat square paragraph.
I am currently doing it with two divs.
It looks exactly the way I want it to look, but when I copy the text into MS Word, the copied text is all messed up.
I am trying to figure out if there is an easier way to accomplish the same task.
Try to put numbers into SPANs having "absolute" positions. Something like this:
http://jsfiddle.net/WvU7X/
However, I guess it won't look exactly the same after pasting the text into Word.
Instead of using DIVs, separate the elements with tags, then give them the attribute "display: inline-block;". This will allow them to have padding / margin applied to them while still appearing inline.
Note that for IE7 and thereabouts, inline-block does not work properly. Instead you have to use a combination: "display: inline; zoom: 1;". Then go about your padding and margin business.
The use of span tags will allow you to copy / paste into Word with less damage than divs.
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
Given the code in the screenshot,
I get words highlighted in yellow if I take a note:
How could I achieve the result where the empty spaces between these words would be highlighted too, so that the whole note is highlighted in yellow?
The span element surrounding all these divs (wrd) is there by chance, so it could easily exist in some other structure.
I thought of wrapping all these divs and apply a style to a container, but the problem is that I can not wrap these words in any container as they may pertain to several notes and some of these notes could even contain a subset of these words or some text after the words I have highlighted (running the risk to break the HTML structure opening and closing divs the wrong way).
The element wrd has no custom CSS style applied.
WRDS element are now spaced like this:
<wrd>Content</wrd>`whitespace`<wrd>Content2</wrd>
You need to contain whitespaces in the wrd element like this:
<wrd>Content </wrd><wrd>Content2 </wrd>
#background{
background-color:yellow;}
<span id='background'>This is a sentence</span>
I'm trying to line up these div's, but it seems to not be working correctly.
the web address is - http://www.minvera.com/hosting-price-sheet
I need all the div's to line up because it's supposed to be similar to a table, but I hate tables.
Any suggestions?
A table is a table and if you want to make a table yous should actually make a table :-) Tables are not bad per se. Ommiting a table just because you dont like tables is wrong. On the other side you are using <br> which should be avoided.
Whatever: If you open up your code between your rows you have some <p> and inside those you have <br> between some links without text.
Remove those <br> and your table looks correct. Those <p> are actually over the full width of your container and therefore are pushing down subsequently the following divs. Maybe they are from some html editor? If you need the links in separated lines make them display:block
It's hard for me to see why you need it that way, because I would have placed my divs differently.
Your div are seperated by a paragraph and in contain a wich make the line break. Also there always a line break after the paragraph so you have to play with the padding and the margin to remove it.
Hope this help.
You can also use display:inline-block; on each div to make them side by side (work without float).
I'm trying to limit the number of characters in a paragraph to a specific number. If the text is less than this then I want to pad it with whitespace and if it's longer then I will truncate is with an ellipsis. I want all containers that contain paragraphs to be the same size.
I'm using a responsive grid and so my container will resize dynamically to the length of the paragraph. I've tried added pre-wrap to the p element but my divs won't resize. It seems to be still ignoring the added whitespace.
p
{
white-space:pre-wrap;
}
Here is a JSFiddle showing my situation: http://jsfiddle.net/RFBza/4/
Omg. But in case you for some reason wish to do it exactly so, try adding a bunch of codes divided by spaces. So, where you added five spaces, now add .
But of course that is still terrible idea.
white-space is not meant to "lengthen" any divs or add padding to fill in space. It is merely meant to determine how the wording wraps in the containing div. If you wanted that text to overflow the div, for example, you could with white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
Now, if you're trying to accomplish that they all look similar, the quick, dirty way is to add a minimum height to the containing divs.
http://jsfiddle.net/RFBza/6/
The problem with this is that you're wording will constantly change, so the actual height may change (and like you said, it's responsive so as you resize this will no longer work either)
There are several other techniques to get this desired effect, but they all require either some JQuery, some markup changes, or even PHP (for if you want a string to only be so many characters, otherwise show ellipsis) etc...
You could even go as far as adding that to the p selector in your CSS, but be careful because that would apply to every single paragraph. Maybe you can use a few more selectors to get specific.
p
{
white-space:pre-wrap;
min-height:192px
}
http://jsfiddle.net/RFBza/7/
Also, use PHP to determine a length and show an ellipsis if it exceeds that. In this case, 50 characters.
echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/