I have a page where I am trying to display full name (firstName lastName) on the browser.
In my JSP, I have
<span>
<c:if test="${someCondition1}">
<c:out value="${firstName}">
</c:if>
<c:if test="${someCondition2}">
<c:out value="${lastName}">
</c:if>
</span>
Now there are some code indentation spaces inside the span element.
The issue is that in Firefox, the code spaces are not collapsed, while IE collapses them.
Also I tried using the various CSS white-space properties ;normal, wrap, -moz-pre-wrap, etc
But this does not seem to be working for some reason.
Also I might not be able to use the white-space property to fix this, since I can have multiple spaces within the firstName/lastName as well which should be displayed as it is e.g. first Name can be
"my First Name"
Thus using CSS white-space on the span element to collapse multiple spaces would be wrong.
You can replace your spaces with
firstName = firstName.replace(" ", " ");
With this you don't need your CSS white-space anymore.
Firefox should be collapsing the spaces but if not try white-space-collapse: collapse;. This is a CSS3 property that explicitly gives the behaviour you want.
EDIT: Wait, I'm confused. In what scenario would it ever be reasonable to use more than 1 space between parts of a name? I'm not aware of any human language where that is acceptable. Is this some kind of alien language?
Try this,
<span><c:out value="${someCondition1?firstName:''} ${someCondition2?lastName:''}"/></span>
have everything in single line.
Related
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>
I've got some text coming in that I don't have control over but want to control the display of.
i.e. my code: <div>{{ incoming_text }}</div>
It's also in an environment where I can't do anything fancy with incoming_text (like string substitution/replacement).
When the text is as follows 'trapped/in difficulty/cornered (participle)', the wrapping (at narrow widths) goes as follows:
trapped/in
difficulty/cornered
(participle)
Is there a way to control this so that the text instead wraps:
trapped/
in difficulty/
cornered
(participle)
The problem is that the word wrap between 'in' and 'difficulty' actually confuses the meaning of that, i.e. it needs to be kept together.
So something like the following would also be acceptable:
trapped/in difficu-
lty/cornered (part-
iciple)
It's also in an environment where I can't do anything fancy with
incoming_text (like string substitution/replacement).
Absent this condition you can replace / with <span class="separator">/<span> using javascript.
Then you can add an ::after pseudo-element which introduces a newline:
.separator::after {
content: '\00000a';
white-space: pre;
}
But I'm pretty sure it's not possible to use a single character / as a CSS Selector, without including it in a <span> element first.
I've looked on MDN at newer pseudo-classes like :where and :is but nothing - even in the latest CSS - appears to give access to a text node.
I am using an html template to send emails programatically. I know nothing about html, but I've just learned that it will collapse consecutive white space characters, which ruins my formatting(I am emailing a table of numbers). How can I solve this problem?
Just use <pre> tag like so:
<pre>
This is some text with some extra spacing and a
few newlines
thrown in
for good
measure
</pre>
Working Example: jsFiddle
and a Good reference on pre tag.
If you don't want consecutive spaces to collapse. Just set CSS property white-space.
e.g.:
white-space: pre;
<span style="white-space:pre;"> </span>
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Well, you can use the metacharacter to produce a "non-breaking space." (I used one in-between these two sentences. But I didn't use one here. Notice how the spacing between these sentences is slightly different, and how the last space is twice as wide because I used two tags?)
Fundamentally, I suggest that you should be using <table> tags within your e-mail body, thus identifying the data as "tabular" and giving you a rich array of options (styles, etc ...) for formatting it. It will look much better than anything you could do by means of "ASCII Art ..."
Server side, I build a list of strings which are the option text of an html select multiple.
Every string is the result of the concatenation of four strings. First, second and third have a length=5. Third string has a variable length, so I complete its length to 19 chars with white spaces:
StringUtils.rightPad(data.toUpperCase(), 19, " ");
Nevertheless, in my html page, these whites spaces are removed.
I have looked for similar problems in this web and others, I have tried with & nbsp;, \u0020, I have tried with css style white-space:pre-wrap;, I have tried a lot of things but white spaces are not preserved.
Any one knows how to solve this problem without javascript? only with html/styles.
Thank you, regards
The default styling in webpages is to collapse whitespace, you can easily change this with the white-space property in CSS:
p {
white-space: pre;
}
The values pre and pre-wrap preserve whitespace, the difference between them being that pre will only wrap the text on line-breaks, whereas pre-wrap will wrap on all whitespace characters (like regular text. Your question states that you have tried this and it did not work, however I have tested this code and it worked fine for me (using Google Chrome) and the W3C reference says that it works in all major browsers, therefore I suspect it is a mistake in implementation, try again and double-check you are applying styles to the correct class and there are no specificity issues.
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/