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
Related
Im implementing a highlight word functionality based on keyword in the search.
So based on the keyword im replacing the content with span tag and adding class as "highlighted-text"
value = value.replace(RegularExpression, `<span class="highlight-text">${value.match(re)[0]}</span>`);
CSS for highlighted-text
.highlighted-text{
background:yellow;
}
and im also using this css to achieve clipping of text with 3 dots. As you can see in picture below.
.message{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
So its working fine
But let me search for word which is hidden inside clipped text ie. "..." like "hockey"
So its not showing up as its hidden. I want to show the user correctly highlighted text with its before text and after text to some limit.Is there any ideal way we can achieve this is in javascript or css?
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
I have a little question, i have too long text in my cell in table in html, so i use text-overflow property set on ellipsis in css like in this example from w3c: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
and I wonder if I can make for example that popup will show up after hover on that 3 dots on the end of text, is that possible without complicated js code? Or i have to make my own piece of code that will show 3 dots instead of rest of text and then attach on hover function to them or something ?
You can use title attribute of element to achieve your objective without writing any extra code. Just run following snippet and hover over the text to see the result.
.ellipses {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>
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>