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.
Related
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.
I have a fixed size container in which I wish to display variable-length multiline text with known font size, line height, etc.
If the text fits inside the container: it is centered vertically
If it does not fit inside the container:
Any overflow is hidden om a per-line basis (i.e. so that last line is either fully displayed or hidden but not half-hidden)
Text is displayed from the start (instead of only the middle portion showing up due to vertical centering)
An ellipsis is appended to the text (either real one or fake one via CSS hack)
As a bonus, if there are more dynamic solutions with scrolling text or "Read more..." auto-inserted via JavaScript, please mention these to or post a link.
The solution should work or at least have graceful fallbacks for older browsers starting from IE9 (don't care about older versions of IE).
Example usage: comment inside a fixed-size speech bubble:
EDIT:
I suppose I could use
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: #line-height; /* fallback */
max-height: #max-height; /* fallback */
-webkit-line-clamp: #line-number; /* number of lines to show */
-webkit-box-orient: vertical;
But, first of all, it's webkit-only. And secondly and more importantly, how do you then center text vertically when it does fit inside the container?
You should be able to use the text-overflow: ellipsis; property in your css for this. As far as vertically align, I always recommend flexbox and using display: flex; with align-items: center.
EDIT: Flexbox does not work in IE9. In that case, I would recommend wrapping the text in another div and giving it margin: auto; That will put it in the middle of the div.
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."
I am trying to wrap a word in a cell. The <td> has a dedicated width e.g 50px, now i want to wrap the data inside that cell so that it doest get on the next line i.e:
Column 1
Some data
wrapped
Required:
Column 2
Some da..
I want to know if it is possible though javascript or CSS?
This can be done by the text-overflow property in CSS, when used in conjunction with some other style rules.
CSS:
.wrappeddata {
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The width: 50px defines the width.
The white-space: nowrap; prevents it from wrapping.
The overflow: hidden; stops it being visible past the 50px limit.
The text-overflow: ellipsis; makes the cutoff become replaced with '...'
To use it, simply:
<table>
<tr>
<td class='wrappeddata'>A block of text that is too long</td>
</tr>
</table>
Are you looking to truncate the text programmatically or just cut it off at the exact width of the container? If you just want the text to cut off then you can use overflow:hidden on the containing element and white-space:nowrap on the tag surrounding the text.
Using CSS you can style your td
td{width:50px;white-space:nowrap;}
Here is an example with two tables.
Try to play for Text-overflow:ellipsis (on ie) and the overflow attribute (available in all browsers). You may find hard to do this purelly in css and js.
Getting 'dots' to be printed can be achieve client or server side. But you'll need to implement something to check if your text will be widther than 50px. If this condition is met you will have to shorter the text and add your dots.
Regards
<table>
<tr><td width="40" style="word-break:break-all"> YOur.........Longgggggggggggggggggg Text
</td></tr></table>
Lets say I have a Label, Button, or TextArea object, that contains some amount of text. The way that things work by default is that text put in these objects will automatically word wrap around to the next line. Is there a way to disable this? I am aware that the CSS attribute
overflow : hidden ;
will stop the scrollbar from showing up. But is there a way to stop the text from going to the next line?
I wish it to be the case that if I have a string that is "wider" than the object it is placed within, it will simply write out the string to the limit of what the object can contain, without wrapping it to the next line? Anyone have a way of doing this?
Thank you.
You can use the following css definition to achieve this:
<style type="text/css">
.element {
width:200px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="element">
This text will not wrap. Hamina hamina hamina hamina hamina.
</div>
This should prevent any text from wrapping to the next line. If the text exceeds the width of the element, it cuts off. If you are using webkit / explorer you will get a nifty ellipsis effect where the text cuts off (to suggest that there is more text than is visible).
Unfortunately firefox does not support ellipsis. But the text will still cut off and will not wrap.
I haven't tested this defintion with button or textarea elements - only with divs. But I see no reason it should not work. I leave it to you to experiment.