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.
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)
Given the code in the screenshot,
I get words highlighted in yellow if I take a note:
How could I achieve the result where the empty spaces between these words would be highlighted too, so that the whole note is highlighted in yellow?
The span element surrounding all these divs (wrd) is there by chance, so it could easily exist in some other structure.
I thought of wrapping all these divs and apply a style to a container, but the problem is that I can not wrap these words in any container as they may pertain to several notes and some of these notes could even contain a subset of these words or some text after the words I have highlighted (running the risk to break the HTML structure opening and closing divs the wrong way).
The element wrd has no custom CSS style applied.
WRDS element are now spaced like this:
<wrd>Content</wrd>`whitespace`<wrd>Content2</wrd>
You need to contain whitespaces in the wrd element like this:
<wrd>Content </wrd><wrd>Content2 </wrd>
#background{
background-color:yellow;}
<span id='background'>This is a sentence</span>
So, some smartass is putting Zalgo Text in their username. I don't actually want to restrict users from having accents in their names, but text above/below their name can be difficult to read. (note that this example actually renders pretty well here on the finished SO page, but in the editor it's another matter!)
Tͤ̔ͧ̇̍ͣh̥̼ͧͤͭͫ̇͋̿͟i̧̹̥̳̲͎ͨ̿̐̚s̰͕̫̥ ̳͚̳̟̫̭̯͊ͭ̅̏̊i̢͖̭̾ͦ̓͆s̗̹ ̸̬̙̯̫̓̊ͪͭͩ̿ś̰̱̥̖̈̌̆̿ī̥͔̽m̛̹̙̈́̾̊p̙̪̘̄̽̄͗ͦl͕̭̱͎̄͆ě̂͒͑̄ ̜͎̯͚̠̖̍͊̕s̱̞̺ͣ̓̓̒͜a͍ͫ͑͜m͍̙̠̻̲͍̜͒́̇̓͛̍̑p̪̩̪͙͍̥̆͗͝l͍̔̾ͨě̷̞̯̫̮̝̔̓͂̾̐̊ ͂̊̍̑ͨ͒̈́t͉̯̜̣̹̋̊̉́e̶̟̘̬ͫ̊̉̚ͅx̳̻͙̫̮̲͚ț̟͕́̌̚
This is a second example
Right now, the user name on my site is displayed in a simple <span>. I'd like to apply a style to the span that effectively crops the text it contains to prevent it from spilling outside (above/below) the element.
Note that right now, behavior is pretty inconsistent -- sometimes the symbols "bleed into" the line below the user name, and sometimes they don't. It might also vary from browser to browser. I'd prefer a simple, cross-platform solution, if possible.
You can use the overflow:hidden; property. You just need to set the display property of the span to inline-block :
DEMO
CSS :
span{
display:inline-block;
overflow:hidden;
}
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, '...');
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/