Is there a way to turn CSS elipsis dots into a link ?
Something like
text text text text... (The three dots should show up as a link). I read an answer and found that this was not doable. So I managed with substring Operation on paragraph and then wrapping '...' inside <a>tag. Thanks for all your asnwers
There is no way of turning the ellipsis dots into a link (if you are using the text-overflow styling).
However <a> (link) elements are inline elements - so will naturally follow on from whatever text you have... .so the simplest approach would be to append an <a> element to the end of the text... (note that I am using the html entity (…) of an ellipsis - rather than simply 3 dots....
However - this is not really advisable from an accessibility or user experience stand point.... an <a> element is used to take the user to another location - not really to act as a house for the ellipsis .... and here is nothibng to tell the user that there is a link there - nor what happens when you click it.
A Far better approach would be a dedicated and obvious link element - or a show more / show less button at the end of the text... and yes - I say a button...
A link should take the user to another location or context .. .and a button (which can be styled to look like a link) is used to alter the content or perform a function in the same location or context.
Using the right HTMLelement for the right job is important... and so is understanding the outcome of coding choices... you would need to have a good reason to make an ellipsis the link text - and not simply as a show-more... IMO
p, a {
color: #222;
}
a {
text-decoration: none;
}
<p>text text text text …</p>
Related
On Wordpress, when I click the text that drops down a list (done using the detail tag), a blue rectangular box forms around the text. Is there any way, using only html, to prevent this from happening? (I don't have the availability of CSS on my Wordpress.com blog.) Thanks
I think that Wordpress allows inline css by default. So, depending on your settings, the following might work:
<details>
<summary style="outline:none";>Alabama</summary>
<p>Domino's</p>
<p>Donatos</p>
</details>
http://clarkwp.wordpress.com/2013/11/07/inline-css-styling-in-wordpress/
Suppose I want to replace a link > with a fancy image arrow. For that I want to use a CSS sprite.
In many articles, for example in a recent (2012) article in Smashing Magazine, the recommended method is something like this:
HTML:
>
CSS: hide text and specify sprite as background
However this method is problematic concerning accessibility: If images are disabled but CSS is interpreted, then the above link will be invisible.
Interestingly, I found an old (2010) article by Paciello Group that proposes what looks like a good solution. The idea is to place a <span> next to the text to be replaced. The <span> has a background image and is positioned on top of the text. If the image loads, it replaces the text, otherwise the text is still visible.
Why is this method not widely employed? Are there issues with that solution?
The main disadvantage is showing the text to users with no special accessibility needs, before your CSS sprite loads. In terms of code, it is also perhaps not as semantically clean as using an aria-label solution (explained below).
You could consider using an ARIA label for the element:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I quickly checked how Gmail and Facebook approach this problem (buttons without text):
In Gmail the 'previous' button has an aria-label of 'Older'
in Facebook the 'cog' icon in top right has some text 'Account Settings' indented -5000em
I´m working on a site, which collects famous Quotes. The Text of the quote is a link to do something else [...] But I also wants, that the user can select and copy the text of the quote.
But in nearly every browser the user cannot easily select text in Links.
Is it possible to override this in CSS and make it possible to the user to select the text?
In Firefox, you can select parts of the hyperlinks by pressing the Alt key and then selecting as usual with the mouse. So one option is to implement something similar using jQuery: if the Alt key is pressed (or a key that you assign) and the mouse pointer is over the link, then disable the link. When the key is released then enable the link.
Of course you would have to tell your users how to make the selection.
You can,
Step 1 :
Create an attribute draggable to anchor tag.
<a href="http://www.exaple.com" **draggable="false"**>Select Text From Here</a>
Step 2 :
Make cursor style auto & user-select must be text or all
a
{
cursor: auto;
-webkit-user-select: text;
-moz-select: text;
-ms-select: text;
user-select: text;
}
This isn’t really a job for CSS, as this is functionality, not rendering. And it is a difficult issue, because a click on a link is supposed to mean following the link, and breaking this would create a major usability problem.
The best approach is to avoid making the quotations links and use links separately along with them. For example, the credits below a quotation, or the name of the cited resource in the credits, would be a natural link. And if you want a click to “do something else”, then perhaps you should use buttons, not links, associated with the quotations.
You can't. You can, however, make an element look like a link but use JS to actually handle the "link" part of it.
jQuery:
$(".q").click(function() {
window.location.href=$(this).attr('data-link');
});
HTML:
<span data-link="link.html" class="q">text here</span>
CSS (to give it the "hand" cursor)
.q {
cursor: pointer;
}
Demo
I would just keep the quote just text (no link) and then add a smaller link at the end for more info or whatever it may be.
No, but you shouldn't have massive blocks of text in a link - a link should ideally be just one or two words, not an entire paragraph.
I can't tell without seeing your site in action, but I suspect that the problem is that your link tag contains more than just the quote.
If the link shows as "To be or not to be--that is the question", then selecting it should be the same as selecting any other question. If the link is "Here's a great quote: 'To be or not to be--that is the question. Click here to do something else!" then they won't be able to select the text in the middle, which is all they're going to want.
Make sure that your link text is only the text that they want to select, and put anything else outside of the tags, and you'll be fine.
Say you had a "box" like call to action link, and the primary purpose and use for it is to bring the user to a new page. Equally important though, is a means to "select" some of that text (e.g. address, phone number, or in your case - lyrics) something as following works well.
The caveat being, the "selectable" text itself, is not clickable. But then again, for someone who has the intent of selecting the text that won't be a problem. For anyone else trying to hit that link, well, they'll have to click a tad beyond the selectable text boundaries.
<!-- See stylized version in CodePen link below -->
<div class="box-link">
<span>Apple Park Visitor Centre</span>
<span class="box-link__text">10600 North Tantau Avenue<br />Cupertino, CA 95014</span>
</div>
Link to CodePen:
https://codepen.io/mjoanisse/pen/YMNaae
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.
Is there a way with CSS to wrap text on both sides of an element (an image for example). I am trying to have an image positioned in the middle of a paragraph and would like text to flow over it. Please see the image for an example.
Positioning an element typically takes it out of the document flow; so that doesn't work.
I don't think so, no. Not without working with multiple text-columns.
I just threw together one possible solution. You can access it at http://www.sampsonresume.com/labs/img-in-middle/
The only thing that I have seen similar to this would be the A List Apart article: Cross-Column Pull-Out Part Two: Custom Silhouettes. You still need multiple text columns, and even ALA lists it as "experimental". It may be worth checking out, though.
Example here.
Not without some very tricky/tedious text parsing. But anyone trying to read that text would hate you if you made them jump back and forth across an image twice per line, so that's probably a good thing.