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>
Related
This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed last year.
div
{ border: none !important; width: 400px; margin: auto; background-color: #eee !important; text-indent: -9999px;}
div::before{content: 'test';color: black;}
The ::before and ::after attribute don't change the main tag's content, but rather they add content before or after it.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
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:
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.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
HTML
<span class="symbol">$</span>
<span class="value">400</span>
This displays both "$" and "400" at the same level.
The moment I add
CSS
.symbol {
font-size: 2em;
}
then, "400" is pushed down.
Question: Why is "400/.value" affected by changes to "$/.symbol" ?
Thanks.
http://codepen.io/anon/pen/emLLrm
This question realistically is about vertically aligning, and can be solved using
vertical-align:middle
or
vertical-align:top;
to override the default baseline (which by default is set to the bottom).
Demo:
.symbol {
font-size: 2em;
vertical-align:middle;
}
<span class="symbol">$</span>
<span class="value">400</span>
In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:
.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
This is css code:
#div_0, #div_1 {
width: 100px;
height: 100px;
display: inline-block;
}
#div_0 {
background-color: #090;
}
#div_1 {
background-color: #900;
}
and this is HTMl
<div id="div_0"></div>
<div id="div_1"></div>
this displayd so:
http://jsfiddle.net/7G63S/
As you see, here is spice between div tags, for delete this space I can write html so:
<div id="div_0"></div><div id="div_1"></div>
and problem resolved:
http://jsfiddle.net/7yE2M/
But intereset, how can delete space between divs with css, if html look like so:
<div id="div_0"></div>
<div id="div_1"></div>
?
or make this impossible ?
P.S. white-space: nowrap not helps in this case.
Set line-height and font-size to 0 on the wrapping container - see http://jsfiddle.net/7G63S/1/
Add the float:left style to the divs #div_0, #div_
Demo here http://jsfiddle.net/7yE2M/1/
Are you wanting the whitespace for source formatting reasons or is this a case of being unable to modify some generated HTML? If you can modify the html, your best bet is to simply eliminate the whitespace, but that doesn't have to mean you need to lose your formatting. Just comment out the whitespace:
<div id="div_0"></div><!--
--><div id="div_1"></div>
Edit: more solutions can be found here http://css-tricks.com/fighting-the-space-between-inline-block-elements/