I want inline icons to "stick" to their associated text, and to this end I am using U+2060 WORD JOINER to "join" the icon and the word following it.
The word joiner does not produce any space and prohibits a line break at its position.
This should ensure that, even with line wrapping, the icon doesn't get left stuck on its own at the end of a line. But it's not working (at least for me, on latest Chrome).
body {
font-family: 'Meiryo', 'Verdana', sans-serif;
line-height: 1.5;
}
#test {
width: 200px;
border: 1px solid black;
}
#test img {
vertical-align: bottom;
}
<p id="test">You obtained a <img src="//via.placeholder.com/24" />MacGuffin!</p>
While I'm aware I could achieve this effect with HTML, such as using <nobr>, <span style="display: inline-block">, <span style="white-space: nowrap"> or several others, I would like to avoid adding HTML in this case. Mostly because, if the item name is more than one word, I still want the item to be able to wrap. I just want to ensure that there is no line break between the icon and the first word after it.
I could've sworn this used to work, so I don't know if it's an update to Chrome that broke it or I'm just remembering wrong. Or maybe it was never supposed to work? EDIT Can confirm it used to work January 16th 2020, as per my excited message on Discord telling my friends about it.
hope this will do the trick:
It seems to work with any width I set the container to and will stay connected to what ever foo will be.
it-helped-me
Related
I would like to wrap the text inside a div container, but I don't want words to be cut at some "random" character.
I have tried with style="word-wrap: normal", but that only works in IE, not in Firefox. When using style="white-space: some option", words get cut at unwanted points. For example the word "reason" is shown as "reas" at the end of the line and "on" at the beginning of the next line. Using the option "nowrap" is not ok, because the text exceeds the margins of the div container.
<div style="text-align: justify;">I agree, fully and voluntarily, to participate in this research study. With this, I retain the right to withdraw my consent, without having to give a reason for doing so.</div>
I would like that word wrapping occurs at the end of each line, if the space is insufficient for the whole text inside the div container. But I also want words to be sliced in a grammatically correct way or not sliced at all: simply show the word that does not fit at the end of the line in the following line.
This is the situation right now:
It looks like your CSS is set to use word-break: break-all. If you change / override it to use word-break: normal then it won't happen anymore.
Demo:
div { width: 190px; background: #ffc; }
#div1 { word-break: break-all; }
#div2 { word-break: normal; }
<div id="div1">
Without having to give a reason.
Without having to give a reason.
Without having to give a reason.
</div>
<br>
<div id="div2">
Without having to give a reason.
Without having to give a reason.
Without having to give a reason.
</div>
Not sure, if you tried this, but the answer may be to simply increase the size of the border
border-width = //put a value here
I am working with an HTML table that is misbehaving when it comes to semi-long lengths of text. The picture below is worth 1000 words. In the first cell shown, the text "Embroidered Lettering Only" becomes stretched out as far as 'between character spacing' goes. It looks like its happening on the next cell as well in the "FLOSS" text.
Is there an attribute that I can use to prevent this behavior? Most of my search results have mostly produced table spacing issues, not text inside of a cell. The only attribute on the table that relates to size is <table width="100%"> I would prefer to conquer this with an inline attribute, but I can work with almost anything.
Note that I have tried letter-spacing= "0" and other values, to no avail. It is modifying the spacing behavior, but a value of 0 does not change this to normal spacing in the screenshot example.
I don't think it matters, but this is HTML that is being converted to a PDF through the BFO engine, within a NetSuite environment
I've come across this issue using Netsuite / BFO, the solution is to use this CSS:
td p {
text-align: left;
}
Source (login required): https://usergroup.netsuite.com/users/forum/platform-areas/customization/bfo/397738-how-do-i-prevent-text-justification-advanced-pdf-freemarker-bfo
Marc B mentioned it in his comment, you probably have text-align: justify; somewhere in your CSS for the table. Try tracking that down and changing it to text-align: left;
For example:
table td {
text-align: justify;
}
Would want to be changed to:
table td {
text-align: left;
}
That being said, it's hard to know for sure without seeing your current markup and CSS, so it would probably be a good idea to add that to your post.
I have an application that has a lot of buttons in the window. In writing the HTML documentation pages for this, I've been successful in creating a bordered, sorta-shadowed CSS <span> with text within that represent the buttons that just have legends on them.
This allows me to show "momentary" buttons like these...
...that just have a legend on them in such a way that it's reasonably obvious what I'm describing by simply putting...
<span id="button">LAP</span>
...in line with the associated description (and my custom documentation system makes it even easier by letting me invoke the style inline with [s button LAP]. Fun. :) Here's the style I built for that:
span#button
{
font-family: Courier;
font-weight: bold;
white-space: pre;
border: 1px solid #000000;
background: #ddddee;
padding-left: 2px;
padding-right: 2px;
color: #000000;
}
Here's screen clip of part of the documentation that uses that technique:
Also within the application, I have buttons that have "LED" indicators on them. A typical one might display a green LED when on, and a dark LED when off. Screen clip from the application (with a dark style sheet, so the buttons are dark) showing some of these:
I already have nice little .jpg images that show all the "LED" colors I use, conversely, an embedded CCSS box filled with the right color would be fine too.
What I would like to do, and am having no luck at all doing, is create a <span> within the text that looks as least somewhat like one of those buttons -- without going to specific images for each button, or in other words, using CSS. Since the only things that vary are the LEDs and the text, I want to can the LEDs and feed in the text. Something like...
<span id="greenbutton">Run</span>
In order to do that, I need the LED to appear above the text, and size the text small enough to land underneath it, and center them both within a bordered box as the text-only version above does. I would like an output like this (button built in an image processor)...
press to start
...from this:
press <span id="greenbutton">RUN</span> to start
It seems like it ought to be easy enough; and I can add quite a bit of complexity within my documentation system if required to make it all work -- multiple nested spans, divs, images, test, whatever it takes -- but I keep running into these two showstoppers:
<span> wants things to come one after another horizontally
<div> either causes line breaks or floats left or right
I can't seem to get a <div> to just land in the text where I put it in the first place, although I've been able to make them look just like I want them to because they understand vertical alignment and positioning withing their own context.
I was also thinking of some actual images of buttons with the text removed from them in each LED state, used as background to a span, where the text is overlaid on that background, thereby looking like a specific button. I've not tried this, as I can't seem to find how to make a span have a background and <div>... a <div> won't stay where I want it (not left or right, but right there, or else refrain from breaking the lines if it's not floated.
I'm not opposed to putting a table inline, either. If I knew how...
I hope I'm missing something. In which case, help! Or is this impossible, and the only solution is to screen-cap the many, many buttons in each of their various states (some actually display multiple LED colors for various settings, worse yet) and then drop the images in where I want them? Because although I could do that, it's awfully clumsy and effort intensive. :(
Introducing the pseudo element "before"! Ta-da!
<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>
<style>
span.myButton {
display:inline-block;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding:1px 2px 0;
background: #dde;
width:20px;
height:auto;
font-size:10px;
font-family:monospace;
text-align:center;
}
span.myButton:before {
display:block;
margin:2px auto 0;
width: 16px;
height: 5px;
border: 1px solid #000;
content: "";
}
span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}
</style>
Updated answer: I changed the display on the span to inline-block, so it will go inside a paragraph. I missed that requirement on my previous answer.
I added a class to each span, so that all spans in your document won't be affected, just the ones with that class.
Technically, if you are going to have more than one green button, you shouldn't use an ID for it. ID's are supposed to be unique and therefore only used once in a document. So I've also converted that to a class.
in CSS, the period denotes a class, as opposed to the # sign denoting an id. Ergo: span.myButton targets the span with class "myButton". span.greenbutton targets a span with the class greenbutton. You can have more than one class on an element.
I took the background-color property out of the span:before style, and put it in a class specific style -> span.greenbutton:before. Basically, the classes for the span.myButton and the pseudo element span.myButton:before are the same for all these buttons. But for each color, put an additional class on the span, and create a style with that class for it, using the background color you want. Hope that's clear. Fiddle updated too.
https://jsfiddle.net/maguijo/05zwwjy6/
I am dealing with some HTML text that I basically have read access to. I can change things with CSS, but the actual layout of the HTML is static. I am using several hundred instances of the same type of HTML that is laid out like the following:
<div class = 'outer'>
<span class = 'inner'>5</span>
Some other random text that is formatted according to the style of the outer class.
</div>
For the purposes of the project I am working on, all of the text that I am displaying within the outer class (with the exception of the contents of the inner span) needs to justified. But the contents of the inner span need to be anchored to the start of the line. My current problem is that because all of the text is being justified, the inner span content is being pushed out to different places on the line because the text is all different.
So is there a way to have the inner span ignore the fact that the outer class is telling it to be justified? How might I go abut solving this issue?
I would be fine with the way 6 & 7 look as well as the way 8 & 9 look, just as long as it is consistent.
EDIT: CSS
.outer {
padding-left:10px;
padding-right:10px;
font-family:palatino;
font-size:17px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: solid 1px #999;
border-bottom: solid 1px #999;
text-align:justify;
}
And then I realized I often times don't have a class set to the SPAN, so I tried to do what the answer below suggested to do like this:
.outer span{
display:inline-block;
width:10px;
}//But it still isn't fixing the issue of the left side alignment
If I understand the situation correctly, you have short paragraphs starting with a number, and the paragraphs are to be rendered as justified on both sides, but the space between the number and the first word should not be stretched. Moreover, it seems that the paragraphs start with a no-break space; otherwise I cannot understand why they start with varying-width space in the screenshot.
I don’t think there’s any CSS solution. The CSS properties for justification are rather simple, not letting you control which spaces get adjusted (even as per CSS 3 Text).
There’s a character-level solution, though, but with some risks. Instead of no-break spaces (which are treated as non-stretchable by some browsers, but not by all, and the trend seems to treat them as normal spaces except for line-breaking), use fixed-width spaces. This may however fail on IE 6, depending on font; see my notes on Unicode spaces.
You could specify that the number be surrounded by an unstretchable en space, thereby directing all stretching of spaces to other spaces on the line, by starting a paragraph as follows:
<div class = 'outer'>
5 Text of the paragraph.
</div>
The en space, being 0.5em wide, might be too wide. The four-per-em space (0.25em wide) corresponds to a typical width of a normal space when unstretched (though this depends on the font). To use it, replace by or by the actual U+2005 character, if using UTF-8 encoding.
you can use display:inline-block and specify a width... Like this
.outer{
text-align: justify;
}
.inner{
display: inline-block;
width: 10px;
}
I have attached an example of what I am trying to achieve using html/css (if you cannot see the image it is: first name and surname, then second line is job description). I would like the all the text (both lines) to be forced justified (left and right) within a div but I am not sure if it is possible. I have tried a few things with no success. I would rather not use an image, so any idea would be greatly appreciated.
Browsers generally do a crap job at full justification. If you are a design company using this to promote yourself, I'd avoid it.
Also, it only works on paragraphs of text, not single lines.
You can try tweaking the CSS letter spacing to get the effect you're looking for.
Use text-align-last: justify:
.justified {
text-align: justify;
text-align-last: justify;
}
.justified:after {
content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
http://jsfiddle.net/gilly3/En4wt/
source
Since you only want to style the title, you can create specific styles for it. Try combining font-size with letter-spacing until you get the effect you want to achieve.
Text align: justified is for a different purpose, it's meant for paragraphs (or long blocks of text). If you don't have enough text to reach the end of the line, it doesn't work.