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.
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
I have a list of telephones. I format those like so: 555-123-4567.
Users keep trying to use the search function of the browser but don't type the dashes or they copy-paste the phone number that doesn't have the dashes. Thus, they don't find the text they are looking for until they edit it and add the dashes.
This adds a little frustration to their experience.
My current solution is to add a transparent element next to the phone number so that the browser can find it when using the search function. But it feels dirty.
Is there a better way to achieve this?
The only way I can come up with, is if you wrap each set of numbers in its own <span>, and then use CSS to apply the dashes for display (which seems reasonable, since the dashes are purely for visual presentation), for example:
/* selects a <span> element that
is an adjacent sibling to
another <span> element; and
styles the pseudo element (the
::before to present the hyphen
character: */
span + span::before {
content: '-';
}
<span>555</span><span>123</span><span>4567</span>
So far as I'm aware there's no API for providing 'hints' to a browser's search functionality, but the above approach works for me (Windows 10/Chrome 46) allows for the ctrl+F to find the relevant text when I enter the hyphen-separated numbers.
The caveat of this approach is, obviously, that should the user search for the numbers with the dashes included the browser won't find those. So unfortunately you'll need to find one presentation solution for a consistent UI, and try and educate your users how to search or provide obvious search functionality in your page fuelled by a JavaScript solution.
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;
}
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/