I have a HTML page where I am listing pictures of people and their names. If there name is longer than 20 characters I want it to show up on 2 lines instead of one to avoid a lot of empty horizontal space for the people below them
What is the simplest way to make sure to do this. To be clear, I don't want to break up words in name but rather just break up the words on two lines.
You can try setting the width of the container that holds the name to be smaller or alternatively add some padding. For example:
HTML
<div class="name">This is my name</div>
CSS
.name { width: 50px; /* or whatever value works for you */ }
You would rather need to decide what is the maximum width that the name can take. Then,
.boxed-name { width: ?? px;text-align: ??; }
The main issue with a character counting solution is that it doesn't consider the font family neither the font size. This can lead to serious differences. Also, mmmmmmmmmmmmmmmmmmmm can be longer than iiiiiiiiiiiiiiiiiiii if the current font is not fixed.
Related
you can go here: http://phpbb32.majordroid.com/index.php
and see live example
you can see this:
see image
letter "g" is partially visible... and all other similar letters like q, j, p, etc... have the same problem...
how to fix this problem to see the last line normal ?
Also from admin panel I can change font family, and then for some font family the last line of text is normal visible, but for some is not like in this case.
is It possible to adjust to be normally visible for all font family types ?
Thank you
Because .list-inner has css property overflow: hidden set, and a max-height as well it is cutting off the text. If you remove both of this properties it will display correctly.
You need to compromise and choose which way you want to go, max-fixed height might not always work. If you're title have max characters then you don't really need that max-height
So remove those from your list-inner:
overflow: hidden;
max-height: 3.6em;
And hide the forum-description?
Let's say I have a list of users, and each user has some number attached to it. Each user is listed like so:
<span>Niet ⇒ 2</span>
They are all styled with:
.userlist>span {
display: inline-block;
padding: 2px 6px;
border: 1px solid currentColor;
}
Here's an example of it in action:
Okay, this looks all right, the list of users can get quite long so compact-ness is important here. My issue is that that right edge is horribly inconsistent, so I'm wondering if there's any way to improve that.
My first thought was, of course, just setting a fixed width on the spans. However username widths aren't exactly predictable. You can have someone called iiiii and someone called WWWWW but since this isn't a monospace font you get "iiiii" and "WWWWW", very clearly different widths there. So the "max width" would basically be the widest allowed character, which is W, multiplied by the max username length. Let's try that...
Ew. I might as well use a <ul> if that's the result I'm going to get. The next thought was maybe something involving display:table to have the widths be consistent across columns, while still remaining dynamic and - assuming most people have sensible usernames (*cough*... oh hey, so that's how you escape Markdown... huh...) - but it does tend to end up with a lot empty space still.
So my current idea is some kind of justify-alignment. That works quite well for text, right? But alas, text-align: justify does precisely bugger all in this case, possibly because there are no spaces between the elements to be justified.
My final attempt was using flexbox, something I'm already using to good effect in the site's new design. Let's see how it looks with display: flex; flex-wrap: wrap; on the container, and flex: 1 0 auto; on the elements...
Huh, that doesn't look too bad. Not too bad at al-
... Hm. So close. What I'd really like is for the last line of elements to not get flex stretched all the way across. It's okay when there's three or four on the last line, but two looks a bit silly and just one fills the whole width and looks ridiculous.
So I guess this whole little adventure boils down to one simple question:
How can I achieve justify-align-like behaviour, in which elements are spaced to use the full width of the container, except on the last line where they should use their natural width?
To complete this little story, thanks to #Michael_B's answer, here's how I've implemented the solution:
.userlist:after {
content: '';
flex: 10 0 auto;
}
And the result:
Beautiful.
Using flexbox, create 3 or 4 "phantom" items that always occupy the last slots.
So, for instance, user #82 is currently your last entry.
Make fake users 83, 84, 85 with visibility: hidden.
Alternatively, try just one phantom item at the end with visibility: hidden and flex-grow: 10. Target it with :last-child or :last-of-type pseudo-class.
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've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.