I am trying to change the design of the navigation on my site.
We have some products with really long names and I want to cut them short and maybe add (...) or something similar at the end.
So something like this should look like abcdefg... instead of abcdefghijklmnopqrstuvwxyz
a{
width:50px;
overflow:hidden;
}
abcdefghijklmnopqrstuvwxyz
A JS solution is welcome.
I would also like to know why the width isn't being applied?
Use white-space combined with overflow & text-overflow. And don't forget to add display: inline-block to the a element, so you can apply width to it.
a {
display: inline-block;
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
abcdefghijklmnopqrstuvwxyz
Anchors are inline elements by default and any width set on an anchor is ignored. Change the display to inline-block:
a {
width: 50px;
overflow: hidden;
display: inline-block;
}
abcdefghijklmnopqrstuvwxyz
As MDN states:
Inline elements are those which only occupy the space bounded by the
tags defining the element, instead of breaking the flow of the
content.
and...
You can change the visual presentation of an element using the CSS
display property. For example, by changing the value of display from
"inline" to "block", you can tell the browser to render the inline
element in a block box rather than an inline box, and vice versa.
Hovewer, doing this will not change the category and the content model
of the element. For example, even if the display of the span element
is changed to "block", it still would not allow to nest a div element
inside it.
Related
I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.
I am working on a khmer site, I dont know the language, the words are too long. I am trying to fit them in div but they are over flowing. Is there a way that the part of word comes down automatically such that it fits in the div, and over flow part is in next line.
I dont know what to do with it, please help.
Find the image in the attachment
You should use the word-wrap property of CSS to force the text to stay inside div without overflowing.
word-wrap: break-word
See the DEMO here
Check without this property and with it to see the difference.
See if this works - word-wrap: break-word;
Use the word-wrap CSS property:
.mydiv {
word-wrap: break-word;
}
You can give the below CSS style to the div to prevent the div text from overflowing.
div {
word-wrap: break-word;
}
There is an CSS Attribute for "text overflow" inside HTML Objects
You can do somesthing like that to prevent an overflow by default.
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
reference at W3School
Please note that text-overflow property only occurs when the containers overflow property has the value hidden, scroll or auto.
If you want to warp the long words in multiple lines instead of just "cutting" them you may use "word-wrap: break-word;" which causes the Browser to split long words. (reference)
Please note that both specs are widely supported but very old browsers may ignore them. You can see details in the references.
How can I completely remove the default browser tooltip displayed when hovering over a truncated part of text in a link?
Text is truncated because of a css ellipsis rule :
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
When I apply these rules to a fixed width div, I get a html tooltip. (Only in Safari, not in Firefox or Chrome.)
Here is a jsfiddle.
I tried adding a JS preventDefault and adding an empty title attribute, but none of these work.
The ability to show tooltips for elements with text overflow cut off with ellipsis that don't have a non-empty title is part of WebKit core, but it's turned off by default. Only Safari overrides that and has the behavior enabled. There's no way to turn that off from your application code.
As a work-around, add an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be done either for real, as #bas's answer already shows, or by creating a pseudo-element with CSS:
&::after {
content: '';
display: block;
}
(using SCSS syntax). If you use Sass and create a mixin encapsulating the hiding of text overflow with ellipsis, this can be a nice addition without the need for any extra HTML mark-up.
I was also not allwed to use pointer-events:none, because it is a link. I was inspired by the answer of user1271033. The examples did not work for me, but adding an empty div before the text inside the truncated div worked for me.
Example:
<div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;width:50px;">
<div></div>
Test test test
</div>
How about this http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? Maybe it will be suit you. Examples:
<div class="text-container">longlonglonglongname</div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: '';
display: block;
}
<div class="text-container" data-name="longlonglonglongname"></div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: attr(data-name);
}
You can disable the tooltip in Safari by setting pointer-events: none; in the CSS. Be aware though, this disables all pointer events, so if it's a link, then the link will disable as well.
Add css in your code
pointer-events: none;
Even you can create new css for it and apply wherever required.
You can do it in this way :
<div id="fix" title=""><span style="pointer-events:none;">Lorem ipsum dolor sit amet</span></div>
Have a looke
https://jsfiddle.net/poojagayake/tx06vq09/1/
It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?
Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.
Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.
Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
Is there a way in css to make sure that a div or class is only one line of text, and if it runs over, append ellipses on it? I know that you can set the div/class to a certain height and overflow:hidden, but it looks strange for what I'm trying to do.
In the picture below you see that the div on the right is larger than the one on the left. If I can make the name of the song one line with ellipses, they will both be the same height. Anyone know how to accomplish this? P.S. I want a better way than doing something like $song = substr(0, 10, $song) in php... something hopefully possible with CSS.
Set a width on the container.
Set white-space: nowrap.
Set text-overflow: ellipsis.
Hide the overflow*
Demo: http://jsfiddle.net/jD99d/
.my-class-name {
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
overflow: hidden;
}
See https://developer.mozilla.org/en-US/docs/CSS/text-overflow
* Note that "This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden."