Please refer to this image from the fiddle at https://jsfiddle.net/dn9tt26e/
How do I prevent wrapping just after the
<i>(03/10/2016) Author Name</i>
element so that each line (except perhaps the last) always takes the full width of the container?.
The following image from the https://jsfiddle.net/hzsb8wr3/2/ was proposed as a solution; it works in Chrome, but it shows a break (in Firefox) before the last slash in the date (03/10/2016)
But I don't want the text to break at all in the middle of a line; in order words, all lines of content (except perhaps the last) should fill the horizontal width of the container.
The word is breaking at the space because it is considered an "acceptable break". The only way I can think of to get around this is to add in a non breaking space instead. e.g.
<i>(03/10/2016) Author Name</i> yoursuperlongtextstring
This will mean there is no acceptable break so it will use the css you have implemented with overflow-wrap and word-wrap to break at the end of the line.
Update: Here is a demo forked from your original fiddle https://jsfiddle.net/hzsb8wr3/2/
Update: added screenshot.
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
The following snippet renders (assuming) correctly without trailing space underlined in Firefox 59, but in Chromium 65 the bogus space in the end of the line before the explicit line break is rendered:
<div style="width:100px">
This is long link, <br />with a line break
</div>
Screenshot from Chromium 65:
Screenshot from Firefox 59:
The obvious fix for this case is to remove the space in front of the line break, but it is unnatural.
Is not one of the rendering wrong? Is either of the behavior specified by HTML or CSS specification or is this really undefined?
Edit 1: The same behavior as in Firefox can be observed also in the IE, so it looks like the Chromium is the only one.
The problem isn't that Chrome is underlining the trailing space while Firefox isn't. The problem is that Chrome isn't removing the trailing space when wrapping the line (when the wrap originates from a hard <br /> wrap). The space is underlined because it is there, which is inconsistent with how Chrome handles trailing spaces when auto-wrapping text.
The CSS specification on handling trailing spaces on wrapped text states:
4.1.3. Phase II: Trimming and Positioning
As each line is laid out,
A sequence of collapsible spaces at the beginning of a line is removed.
If the tab size is zero, tabs are not rendered. Otherwise, each tab is rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the tab size from the block’s starting content edge. The tab size is given by the tab-size property.
A sequence of collapsible spaces at the end of a line is removed.
If spaces or tabs at the end of a line are non-collapsible but have white-space set to pre-wrap the UA must either hang the white space or visually collapse the character advance widths of any overflowing spaces such that they don’t take up space in the line. However, if overflow-wrap is set to break-spaces, collapsing their advance width is not allowed, as this would prevent the preserved spaces from wrapping.
The CSS Working Group has discussed the inconsistent handling of trailing white-space on their github repo, specifically mentioning that Firefox's handling of trailing whitespace is the most ideal:
And lastly there's the point that trailing spaces just look bad, and that having a space just inside the closing tag of an inline or before a <br> is a reasonably common unintentional markup pattern that shouldn't have a bad effect on rendering. The preserved trailing space becomes noticeable both when the inline is styled, as in the example given by #palemieux, and also when we chose text alignments other than start. This gives a real-world use case indicating a preference for Firefox's behavior.
From this discussion, the earlier mentioned CSS spec has been updated (in the github repo, but not apparently published yet) to match the Firefox (Gecko) behavior. Specifically updating points 1 and 3 from above to :
A sequence of collapsible spaces at the beginning of a line (ignoring any intervening inline box boundaries) is removed.
A sequence of collapsible spaces at the end of a line (ignoring any intervening inline box boundaries) is removed.
Emphasis on changes added by me.
If we check the specification we can read this:
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped.
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, '...');
I have the following HTML code:
this is just a <i>test sentence</i>
As you can see, I put in "white-space:nowrap" to ensure that the sentence stays on one line no matter the browser window size. However, it seems that italicizing some words in the sentence prevents this from happening. On smaller browser windows, the result is "this is just a" on one line and then "test sentence" on the next line. How do I make it so that the sentence always stay on one line?
Italic does not cause line wrapping. The problem is in some part of a style sheet that was not disclosed in the question (the code posted does not demonstrate the problem). It might be a “killer CSS reset”, which really tends to mess things up. It might be something like * { white-space: normal }, which naturally causes normal line wrapping inside the i element, instead of letting it inherit white-space from its parent.
So you should clean up your use of CSS, preferably getting rid of “CSS resets”. Reset just the properties that really need to be reset.
I've had this problem as well in FF - identical situation.
The quickest fix is to set the font size to be a bit smaller e.g 90%.
I don't have any css resets either.
You could try adding inline-block to the href which works at least in chrome
this here is a very long is just a<span style="font-style: italic"> test sentence</span>
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/