Edit: This question doesn't make sense, and my actual problem was that I had an <a> tag inside another <a> tag.
I'm in a scenario where it seems like I cannot use tags for links. Is there any JavaScript alternative, that functions the same way?
I have a string of text, and I have parts of that string which I want to have as links. This string has a fixed width of 200px, and needs the CSS overflow: ellipsis (Thus it should not wrap)
JSfiddle: https://jsfiddle.net/LzL9cv00/4/
This is how you would create links.
<p>
So here we got Link1 and Link2!
</p>
Suggested change:
https://jsfiddle.net/LzL9cv00/6/
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.
So, I have a text, written in a <p>, and I want to add a <div> (that contains a word) in the middle of the text, exactly like the codeblocks are this question.
There is a small constrain in my case, the: <p> is aligned-center, and thus has float: none.
I'm sure I missing something, but I'm not being able to get it, and I also don't find any suitable combination of keywords that provides me the answer in google or stack.
I tried putting the div inside a <code>, but it didn't worked (even thought a simple word works).
Try to apply display: inline or inline-block to the div CSS ... and plz make a fiddle (http://jsfiddle.net/) if you can ... it's very helpful.
Can you tell me why the table cell with text is going out of the div?
My code:
http://nocleg-i.pl/1969/wyszukane/
It looks like a long text link is the culprit here. In cases such as these, you can simply use CSS to force word-wrapping. Just apply the following to your stylesheet and voila!
div.text_exposed {
word-wrap: break-word;
width: 500px;
}
(Please note that it is required to set a width for the word-wrap rule to apply)
As #Vinny Burgh said, the long link is the problem. However, Don't leave the anchor tags blank. Add some words to it so the url doesn't show up and the content doesn't break.
Missing text-Input text here
Basically, you have to put some text where I imply above.
Or, it could be a html bug, maybe some unclosed anchor like this:
<a href="the_actual_extra_long_link double quotes to close the href and a > symbol may be missing </a>
<div id="id_4f4e2a34992008a12697010" class="text_exposed_root text_exposed">
It's working good when I translated to English, browser does not support your language.
I think the problem is in your class. Remove the div class and and retry.
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.
I have long text that gets hidden if it exceeds 300 characters. Hiding is done with a <span> that has style="display:none;" set.
Basically, after the 300th caracter the rest of the content in wrapped inside that display:none span.
The algorithm is clever enough not to break text in the middle of a tag, so the invisible span will always occur after ending a tag.
The problem I have only happens in Mozilla and that's when the 300th caracter happens to be in the middle of a UL or OL. The rest of the browsers behave properly, hiding the part of the list that's outside the span and showing the other part, but Mozilla doesn't.
Any idea how I can fix this please?
UPDATE:
Code:
<ul><li>a</li><li>b</li><li><span style="display:none;">c</li></ul></span>
I know it's invalid markup because of the overlapping tags.
Thank you.
Fix your markup. If you properly close the span tag inside the <li>, it should work correctly.
<ul><li>a</li><li>b</li><li><span style="display:none;">c</span></li></ul>
Closing the <span> outside the list may be convenient, but for the browser to properly parse it, you need to use proper markup where possible. If you can't figure out how to close it within the <li>, maybe you need to re-think your code.