I'm trying to put a link called Submit resume in a menu using a li tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
Use white-space: nowrap;[1] [2] or give that link more space by setting li's width to greater values.
[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2] white-space - CSS: Cascading Style Sheets | MDN
You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…
display: inline-block; will prevent break between the words in a list item:
li {
display: inline-block;
}
Bootstrap 4 has a class named text-nowrap. It is just what you need.
In your CSS, white-space can do the job
possible values:
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal
Related
I have a problem that the text doesn't break in a popup made with Vue.js which is included in the header like this:
The text breaks normally if I include the popup into the main screen, but doesn't if I include it into the header. I have also drawn border around the <p> element which contains the text and the border is drawn correctly.
Here is the sample code: https://codesandbox.io/s/cold-feather-3zi3d?file=/src/components/BasicModal.vue
The class .header-frame is adding the css:
.header-frame {
white-space: nowrap;
}
This is the reason for which the text does not break when inside the header.
Try adding
white-space: pre-wrap;
or
white-space: initial;
You could add the following style rule :
white-space: pre-wrap;
in :
<p slot="modal-paragraph" style="border-style: solid;whitespace:pre-wrap">
Try to remove :
white-space: nowrap;
from header-frame class
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 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/
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>