I'm looking for a way to mark when text overflows it's container. The code goes like in this example. Basically, it's a <span> with a set size. I want some kind of marker to show me when the text overflows.
I tried text-overflow:ellipsis;, which sounded perfect, except that it only works if the parent is the one whose size is restricted (right?).
Does anyone have any pure-CSS (JS and editing the HTML is out of the question here) ideas for how to alert me to when the text is being clipped?
Thanks!
You have to add the white-space: nowrap; style to the container along with the text-overflow:ellipsis;.
See here
Edit Here's some more info on it.
Related
This may be a stupid question, but I am making a website and I want to have a page that has a fixed image that stays where it is when you scroll to see more text. One problem that I have encountered is that I can get the image to be fixed, but then I cannot make other text scrollable. The other problem is that I can get the text to be scrollable but the text goes under the fixed image. Is there any way that I can fix this. I have been using very simple html divs with classes from a style.css file.
As Geeky Quentin said, z-index is the solution to your problems. You mentioned that you are using classes in css, so in the class you should put z-index: index. The higher the index, the more things it goes over. If you want an image to stay where it is and not get anything put over or under it, you can just use different z-index indexes. If you separate the s then you should be able to make the text scrollable. I hope this answers your question.
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this:
In the image below, my code is on the left and my output is on the right. In the div, I allowed for y-overflow only, and set x-overflow to hidden, and replaced x-overflow with elipses. As you can see, I was able to achieve this result in the output box.
However, If I click in the output box div and highlight the text say the "dddd..." part, and drag to the right, I can see all this empty space to the right of the elipses. That is, I can highlight text and drag, to see the white-space overflow in the div. Is there a way to prevent this from occuring?
The reason I can "highlight" the text within the box and "drag" it to the right to see the "x-overflow" is because I was using the browser google chrome. For some reason when I use the browser "firefox" the problem disappears.
(If anyone can suggest how to fix the problem in chrome please post an answer.)
I have a problem similar to this: CSS: fluid text input with floated-right button, and I particularly like this solution: http://jsfiddle.net/t7tgJ/3/
However, in my case, different buttons have different text, so I can't use fixed width. Also, the text in the button changes as well (on submit).
Specs:
A text field and a button on one line. The button should float: right and the text field should always be container - button.width - paddings - margins. How can I accomplish this without Javascript?
I've had a play around in JSfiddle. I've gone with a positioning-only version. This might help. It's close but not finished. I hope this helps.
http://jsfiddle.net/t7tgJ/105/
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/