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, '...');
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)
There should be a simple solution to this, but so far it's eluded me.
This is what I want to achieve, inside a single td:
text text
text txt [div [img][img] ]
txt t txt
The div just protects the two imgs from getting moved around promiscuously (they're buttons, the left one sometimes invisible, and need to stay side by side) The text, which can vary in length, needs to line up flush-right with the div, not wrap it.
Because of the amount of massaging I have to do on updates, which are frequent, I can't solve it by using a second td to hold the div, tho that would otherwise be ideal.
This is the basic code for one item (there are several, assembled into a string in a for loop, which is then written to an .innerHTML)
'<td class="Label" id="rank'+i+
'">Some text of<br>arbitrary, but not great,<br>length'+
'<div class="x">'+untie_button('off')+tie_button(i)+'</div></td>'
Class Label declares color, font, and text-align:right
Class x declares some padding and vertical-align:middle.
The routines untie_button and tie_button are trivial, merely returning the appropriate img with an id indexed by i attached.
I get one of 2 results, depending on what flavoring I try: the text is completely above the div, or it wraps the div.
Putting the text to be flush-righted into a span declared inline-block, followed by the div also declared inline-block, inside the td declared with vertical-align:middle seems to do the job well enough for my purposes (it has little adaptability). I'd to move the id from the td to the span, but that's okay since I'm not trying to modify the td as such.
*sigh* Hope this helps someone else.
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>
I understand how negative indent works with CSS, but my question is, is there a way to have a kind of 'tab' in between the beginning of the negative indent and the rest of the text?
What I am trying to accomplish is the same look as in http://copyrighter.ru/canada/test.htm - please have a look at paragraphs starting from [6].
Notice that [6] is moved to the left of the line, while the rest of it looks like a neat square paragraph.
I am currently doing it with two divs.
It looks exactly the way I want it to look, but when I copy the text into MS Word, the copied text is all messed up.
I am trying to figure out if there is an easier way to accomplish the same task.
Try to put numbers into SPANs having "absolute" positions. Something like this:
http://jsfiddle.net/WvU7X/
However, I guess it won't look exactly the same after pasting the text into Word.
Instead of using DIVs, separate the elements with tags, then give them the attribute "display: inline-block;". This will allow them to have padding / margin applied to them while still appearing inline.
Note that for IE7 and thereabouts, inline-block does not work properly. Instead you have to use a combination: "display: inline; zoom: 1;". Then go about your padding and margin business.
The use of span tags will allow you to copy / paste into Word with less damage than divs.
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/