.applyWordWrap{
max-width: 8em;
word-wrap:break-word;
}
(o.4em = 1Character)
8em = 20Characters .
I have a string with 60 characters.
I want to show a line with 20 characters, then wrap the remaining text to the next line which contains 10 characters followed by ... (triple dots)
I tried the above snippet, but its not working
I referred different posts but they are not much helpful.
How i can achieve this using css?
The closest you can get is to set a maximum width in ch units Take a look here.
This approached its the closest approximation to get the width of the characters that we have in css.
try this:
.applyWordWrap{ max-width: 20ch; word-wrap:break-word}
Your calculation is right only if you use fixed-width fonts. In TrueType fonts character width is variable, so the string "www" is wider than "iii". It's the reason why CSS deal with actual string length and not with number of characters.
The following sample illustrates it:
#ttf{
font-size: 16px;
}
#fixed{
font-family: Courier New, monospace;
font-size: 16px;
}
<div id='ttf'>The text in 32 characters length</div>
<div id='fixed'>The text in 32 characters length</div>
If you want to bound the string by the fixed number of characters you should use JavaScript.
Related
So, here's my problem: I'm creating a website where I've some posts. In those posts, I put a "::first-letter" highlighting to make it bigger, and it works perfectly.
But, when I'm going to load a post with first letter as a Unicode Emoticon that is a UTF-8 mb4 (2 Unicode Chars), it fails, by trying to load the single char as 2 separated, so the result is something strange.
This is a screenshot:
How can you see, there's a bigger letter and one smaller that are unknown, and then the same emoticon visible, because I created a post with the same emoticons wrote down 2 times.
.first_letter_post::first-letter {
float: left;
padding-right: 20px;
padding-top: 0px;
margin-bottom: -15px;
margin-top: -10px;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
}
<p class="first_letter_post">πΏfoobar</p>
This is the character: πΏ, and I'm using Google Chrome.
I hope someone can help me with this.
Chrome has a long know history of problems with unicode [bug]. This issues is a combination of those problems:
Failing to correctly recognize symbols consisting of more than 3 bytes.
Styling symbols regardless of being a letter unit
This results in Chrome tearing a single symbol apart.
IE is correctly recognizing unicode symbols consisting of multiple codepoints and applies the styling regardless of the spec stating that ::first-letter should be applied to typographic letter units only.
Firefox behaves very strict to the spec, not applying styles to non-letter units. I could not determine whether the Alphanumeric Supplement Space should be treated as letter as well, but Firefox is not treating them as such.
This means, that you should refrain from using ::first-letter when you are heavily relying on it and know that those characters might occur.
A possible solution I could think of, is manually detecting the first character via javascript and wrapping it in a tag and then apply the styles. My solution is a bit messy due to the hard coded hex value, but it might be sufficient.
// manually wrapping the "first character"
Array.prototype.forEach.call(document.querySelectorAll("div"),function(el){wrapFirstChar(el)});
function wrapFirstChar(div){
let content = div.innerHTML,chars=content.charCodeAt(0) >= 55349?2:1;
div.innerHTML = "<span>"+content.substring(0,chars)+"</span>"+content.substring(chars);
}
// this is what javascript sees at the first two positions of the string
//Array.prototype.forEach.call(document.querySelectorAll("p"),(e)=>console.log(e.innerHTML.charCodeAt(0)+"+"+e.innerHTML.charCodeAt(1)));
p::first-letter {
font-weight: bold;
color:red;
}
span {
font-weight: bold;
color:blue;
}
p{
margin:0;
}
<h2>using ::first-letter</h2>
<p>πΏ 4 bytes symbol</p>
<p>π
° Enclosed Alphanumeric Supplement 1F170</p>
<p>πΉ Mathematical Alphanumeric Symbols 1D7B9</p>
<p>πΈ Arabic Mathematical Alphabetic Symbols 1EE00</p>
<p>a normal character (1 byte)</p>
<h2>manually replaced</h2>
<div>πΏ 4 bytes symbol</div>
<div>π
° Enclosed Alphanumeric Supplement 1F170</div>
<div>πΉ Mathematical Alphanumeric Symbols 1D7B9</div>
<div>πΈ Arabic Mathematical Alphabetic Symbols 1EE00</div>
<div>a normal character (1 byte)</div>
I need to write this text in HTML:
I tried to use some unicode characters like β Unicode Character 'BLACK CIRCLE' (U+25CF) or ⬀ Unicode Character 'BLACK LARGE CIRCLE' (U+2B24) but they need some styling (i.e. the size is different than in o) and have problem displaying on some systems and fonts.
Can you suggest a better solution? It can be a wide-accepted unicode character or some CSS imitation (in that case it would be nice if HTML still contains Now. string for good indexing). Image is not an option.
I would suggest to use CSS border-radius to create the solid "o" circle.
span {
font-family: sans-serif;
font-size: 50px;
}
i {
display: inline-block;
text-indent: -9999px;
width: 30px;
height: 30px;
background: black;
vertical-align: middle;
border-radius: 50%;
}
<span>N<i>o</i>w.</span>
If you really want filled O character and not an ugly circle, the only (and rather simple) way to archive this is to edit your font and create filled "O" character. Sounds rather frightening, but it is an easy task to accomplish.
You can make a new font or add your custom character to existing font. For font editor you can use FontForge, for example.
Here is an example on how I made it with Percolator-expert font:
https://github.com/jehy/Storyteller-Dots
P.S. If you want just a circle, using custom font is also better because you have out-of-box control over font size.
Another solution - use unicode characters, provided by many fonts:
β β β β‘ β You can output it with the following code:
β β β β‘ β
This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
I would like to display a number of underscores to the user to let them know how many characters they need to fill in to satisfy the length requirement.
My problem is: underscores aren't separated by spaces.
Q: What font or css style should I use so that my underscores can be easily counted?
You can just use letter-spacing: 0.4em; to separate out the various characters in the element. I'm assuming you're using an input element, so:
input {
letter-spacing: 0.4em; /* or whatever measurement you prefer... */
}
JS Fiddle demo.
References:
letter-spacing at the MDC.
Use the CSS property letter-spacing.
Visual example: http://jsfiddle.net/8w9WY/
Check out the following screenshot:
http://www.jesserosenfield.com/beta/descenders.png
My problem is that descending (like the "7" in the screenshot) numbers are vertically aligned with the bottom of the span, while other numbers are vertically aligned more towards the middle. Is there a way to "equalize" the vertical alignment of all numbers, regardless of ascender / descender?
Thanks!
The code:
<div class="postDate">
<span class="postDay"><?php the_time('j'); ?></span><br/>
<span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->
and CSS
.postDate {
width: 99px;
height: 74px;
position: relative;
left: -30px;
font-family: Georgia, "times new roman", times, serif;
background: url(images/dateFlag.png) no-repeat;
text-align: center;
color: #ffffcc;
padding-top: 9px;
}
.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}
Use a different font. Arial puts all the bottoms of its numbers on the same baseline. So does Microsoft Sans Serif. So does Trebuchet. So, for that matter, does Times New Roman.
The fact is, numbers have different ascenders and descenders depending on the typeface. What typographers do is center the "body" of the number based on what they believe looks good, then go up or down from there. Usually that variation is on serif faces, but not always. You can't control it, in any case. BTW, the 3, 4, 5, 7 and 9 are the ones that usually have the descenders and the 6 and 8 usually have the ascenders.
I'm not sure if it would work, but one of the things I would try:
It looks like you have a php function to output the day and month. Instead of just outputting the number why not try wrapping it in a span that positions/styles each number appropriately.
Rough sketch of CSS & PHP:
.georgiaFixNum7 {
position: relative;
top: 5px;
font-size: 18px;
}
echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';
I understand the need for a pure css/html solution with the fonts, but if you are really desperate you could try using seperate images to display the numbers. Your php function would need to work in a similar way.
echo '<img src="/img/' . $num . '.png" />';
Again, just some things I would try out, not certain if they'd work.
Georgia has old-style figures. If you really need lining figures, you should check if there is an OpenType version of Georgia that has this option.
That said, I don't see the problem in using old-style figures in the context you show; no need to have everything align everywhere all the time :)
Just set up spacing so that there is reasonable space above and below.
All you can control is the vertical alignment of the text baseline within its parent. However, you can't control the specific font position of the various characters outlines with regards to the text baseline.
As #Robusto said, one solution is to change the font you are using, so that all numbers end at the baseline. Georgia is particularly bad for numbers, because some numbers (36 or 84 for example) look weird due to one of the digits having ascender and the other having a descender. (Not that you'll have to worry about 36th of May of course :-))
Another solution is to stay with Georgia font, but to increase the vertical padding so that the descenders on 3, 4, 5, 7 and 9 are not as prominent. In your case adding 4-5px below and above the number ought to do it. Of course, that would increase the overall size of the date flag, which might not be desired.
The alternative to increasing the vertical padding that much would be to tweak down the font size couple of pixels, which would make the ascenders and descenders less prominent. This one works only if the user's browser zoom is set at 100% and regular DPI. If the zoom is at 120% or the user uses high DPI, the font visual size is increased and the ascenders/descenders are more prominent.
You might want to consider simply using numbers from a more commonly available similar font. Times New Roman, for example, isn't too different, and mixing the numerals from Times with those of Georgia doesn't look too bad.
Here's an example:
The problem here has to do with proportional vs tabular figures.
You can prevent this behavior by using the CSS font-feature-settings rule with the tnum property:
p {
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';
-ms-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}