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>
Related
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>
Is it possible to get only the first part of an attribute using attr() in CSS? By this I mean, targeting the part of an attribute before a certain character (a space, mainly). For example, from the attribute hello="foo bar" I would like to extract either foo or bar, just by using CSS.
Sincerely, I'd expect the answer to be 'no', but I'm not really sure.
The generic answer is no but in some particular case we can find some tricks. Since you have a space as a delimiter we can rely on word-spacing and/or text-indent and some overflow in order to hide a part of the word then adjust the width.
Here is an example:
.first:before {
content: attr(data-hello);
word-spacing: 50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
.first:after {
content: attr(data-hello);
text-indent: -60px;
word-spacing:50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
<span class="first" data-hello="foo bar">
some text
</span>
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.
I want to place inline-block element right after inline element in case of need to handle very long string that has ellipsis at the end.
Example is the next:
.container {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-text {
display: inline;
}
.inline-red-icon {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
<div class="container">
<div class="inline-text">
Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstring
</div>
<div class="inline-red-icon">
</div>
</div>
It provides well-rendered results for regular-length strings in case of single-line and multi-line:
But for very long strings the inline-block will be moved on the next line:
Here is the jsfiddle: https://jsfiddle.net/xrkpspfr/4/
I am trying to put this inline-block after last character, so it should be placed after ellipsis in the case with very long strings. But at this time I can think of only JS-based solution that should calculate the position of last character and make some manipulations with position of inline-block element. It will be even worse if you need some responsive behaviour.
Is there HTML+CSS way to put described red inline-block element after ellipsis without line-break before it?
UPDATE: There is a solution only for the case when you don't need support multi-line strings (thanks to #wadber): using white-space:nowrap; and inline-block in both cases - text block and red square.
See the answer below: https://stackoverflow.com/a/39409698/2474379
Try to add this css rule to the .container:
white-space: nowrap;
Here the updated JSFiddle from vivekkupadhyay
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example