On his demo page, PPK says that text-overflow:ellipsis requires (among other things) that "the box has white-space: nowrap or a similar method of constraining the way the text is layed out."
Does anyone have any idea what other types of "constraints" he's referring to? I've tried all the other options for white-space, but none of them give me what I want. I don't believe that all he meant by the phrase "similar method of constraining" was simply "any other white-space setting," but I haven't been able to think of any other text-layout constraints.
I ask because I'd like to display up to two lines of text before visually truncating the text (which I accomplish using height:2.5em), and white-space:nowrap prevents the text from wrapping to fill the space I've allocated.
You need white-space: nowrap if you want to use text-overflow: ellipsis in a useful way.
I don't know what "similar method of constraining the way the text is layed out" he could have been thinking of.
I ask because I'd like to display up to two lines of text before
visually truncating the text
I don't think CSS can do it. Here's an answer where I say the same thing, and 10 months later with 612 views, nobody has disagreed.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
I'm using white-space: pre-wrap to allow user input to include arbitrary whitespace and have it faithfully reproduced in the output.
However, I feel that the space between paragraphs of text is too big.
Is there any way to specify... I don't know, something like line-height, but only for empty lines?
If not, the text is already being parsed for colour codes, so I suppose I could expand the parser to look for paragraphs and wrap them in <p> tags instead. That'd work. I'm just wondering if there's a pure CSS solution.
You cannot select an empty line out of a multiline paragraph in CSS only.
You can select empty elements. But I would go with your suggestion to use p tags.
What is the logic of the selection highlighting overflowing beyond the parent element?
In the attached screenshot, the top one is what I have currently, and the bottom one is a Photoshopped mockup of what I want to achieve.
To me it seems that the selection highlighting is almost largely random; I have not been able to find any definitive resources that explain what makes selection highlighting behave in which ways.
What should I keep in mind in terms of CSS and DOM when wanting to keep the selection highlighting reasonable?
Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.
Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.
Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.
overflow: hidden; or overflow:auto;
position: relative;
float:left; or float:right;
The working example below shows all four methods at work. Some are easier to work with depending on your needs.
Working Example: http://jsfiddle.net/TFvYu/4/
Sources
CSS text selection color overflows outside box
HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome
I have read (actually here on SO, but cannot find the post at the moment) about a way to hide elements with negative margins.
I recall, that the answer contained a deep explanation on why to do this, and the benefits over other methods (visibility: hidden; position: absolute;, display: none). And yes, the method provided a way to remove the element out of the document flow (possibly hackish, not valid).
Have I been dreaming about this or there is such a way? If there is, then yes, I would love the little in-depth explanation.
Thanks in advance!
Are you trying to hide block level elements like a div, or just the text on a link that's got a background image, for instance. If it's the second item, the CSS you're looking for is text-indent. I've used it in the past like this:
a.button {
/* .button is a for instance class name */
text-indent: -9999px
}
This will leave the block level element (the a tag) and any background you've placed on it, in the document flow, but will move the text off screen. This is a technique I've used in the past, but be careful of the text you're hiding--the search engines look at this as a quasi-black hat technique. Just make sure the hidden text doesn't look like keyword stuffing or obvious spam terms and you'll be fine.
Hope this helps.
Using negative margins is generally considered a more "accessible" way of hiding elements. Absolute positioning OR floating will remove it from the document flow.
This article summarizes several image replacement techniques.
http://www.mezzoblue.com/tests/revised-image-replacement/
HTH!
Either you have been dreaming or you have become a victim of cargo cult coding. The obvious disadvantage of excessive negative margins is that you are relying on a maximum window size. (Excessive negative text-indent also has that problem and others.) Anything larger and the element becomes visible again. Add to that that it is nowhere specified what to do with negative margins of that magnitude.
Only with display: none you can remove an element reliably (as if it was not there). Absolute positioning takes an element out of the normal flow, which is not the same as removing it.
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.