This question already has answers here:
How can I do text-overflow: ellipsis on two lines?
(5 answers)
Closed 6 years ago.
In the jsfiddle link you can find what I tried out, however when the text goes over two lines, I do not see the ellipsis anymore. Can somebody help me out. Im new to CSS, and what to solve this problem using CSS/SASS only.
.exciting-text {
display: block;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 2em;
line-height: 1em;
}
.exciting-text::after {
content: "...";
color: red;
}
<p class="exciting-text">Contributing to MDN is easy and fun.Just hit the edit button to add new live samples, or improve existing samplesdfsfssfddcdxcxdsdzxfsfdsadasdaddsadsadsadsadsadasdasfds.</p>
In current example your problem is max-height. Get rid of it and your pseudo ellipsis will be visible at all times.
Related
This question already has answers here:
How to turn off word wrapping in HTML?
(6 answers)
Closed 2 years ago.
Codepen
I'm trying to avoid word-breaks, in my .threadTitle, by using display: inline-block. This works, however when adding a hyphen inbetween two letters will it will cause a break anyways.
Neither word-break: keep-all nor display: inline-block has the desired effect.
.threadTitle {
position: relative;
display: inline-block;
word-break: keep-all;
flex: 1 1 0;
overflow: hidden;
}
This is mostly a Unicode problem, not an HTML one. You need to use non-breaking hyphens (‑, U+2011) instead of a normal hyphens:
<p>This-is-a-really-long-sentence-separated-by-breaking-hyphens-that-will-be-split-among-various-lines.</p>
<p>This‑is‑a‑really‑long‑sentence‑separated‑by‑non‑breaking‑hyphens‑that‑won't‑be‑split‑among‑various‑lines.</p>
This is useful for making sure hyphenated words are never broken between two lines.
If you don't want wrapping at all, use white-space: nowrap;, as Ori Drori's answer suggests.
p {
white-space: nowrap;
}
<p>This is a really long sentence separated by breaking (normal) spaces that won't be split among various lines because <code>white-space: nowrap;</code> is being used.</p>
use white-space: nowrap; to prevent text wrapping:
.threadTitle {
position: relative;
display: inline-block;
white-space: nowrap;
flex: 1 1 0;
overflow: hidden;
}
<h1 class="threadTitle">Thread-Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</h1>
This question already has answers here:
Can CSS force a line break after each word in an element?
(12 answers)
converting white space into line break
(2 answers)
Closed 3 years ago.
I have a word 'Mon 24'.
What is the best approach to break it into different line as in
Mon
24
through css?
I have tried using word-break: break-all but no luck.
https://codepen.io/bbk_khadka/pen/zbVLEp
Set the maximum width to be 3 characters wide
.text {
max-width: 3ch;
}
https://codepen.io/anon/pen/jJjpKV
word-break: break-all will not support all browsers to wrap down. My suggestion to use max-width and table-caption to wrap.
.text {
display: block;
max-width: 40px;
}
<div class='text'>Mon 24<div>
.text {
display: table-caption;
}
Let the element behave like a <caption> element.
<div class='text'>Mon 24<div>
When exceeding the length of the input, the md-chips creates a new line. I'd like the chips to continue always in one single line and the input to overflow horizontally just as a normal text input. How to achieve this? This answer is not working for me.
Image of the undesired behavior:
If you want to overflow chips with pure css, you can do the following: (PLUNKER)
HTML
<md-chips class="chips-overflow" placeholder="Enter an animal..."></md-chips>
CSS
.chips-overflow .md-chips {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
.chips-overflow .md-chips md-chip,
.chips-overflow .md-chips .md-chip-input-container {
display: inline-block;
float: none;
}
** This will work perfectly with angularjs-material version >= 1.1.0, and it works but will have problems with placeholder with angularjs-material version >= 0.0.9
This question already has answers here:
html/CSS Ellipsis
(2 answers)
Applying an ellipsis to multiline text [duplicate]
(23 answers)
Closed 6 years ago.
How can I show three dots(...) in a text like this?
Add all these.
To make in single line.
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; /* some width */
}
To do in multi line which actually you asked.
#content {
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
working fiddle:
https://jsfiddle.net/mishrarajesh/676jc7sa/
Please note that this multiline code is supported only in web-kit browsers for now.
This question already has answers here:
Add line break to ::after or ::before pseudo-element content
(8 answers)
Closed 7 years ago.
I want to add text to a div by using css code (and not directly in the html page). I want to add a sentence in a div (class = title) but I want to jump a line in this sentence at some point.
My css is:
.title
{
visibility: hidden;
}
.title: after
{
content: "Part 1 Part 2";
visibility: visible;
margin-left: -220px;
}
I would like to jump a line between Part 1 and Part 2.
I thought maybe it worked by using something like \n or \a but it didn't work.
Thank you,
Best Regards
Use white-space: pre-wrap;
Check out this fiddle.
Here is the snippet.
.title {
visibility: hidden;
}
.title:after {
content: "Part 1 \A Part 2";
visibility: visible;
white-space: pre-wrap;
}
<div class="title"></div>