I am trying to get the text "yes please" on one line. I want it aligned exactly like that. However it is displaying on two lines.
Where happy to hear from you
Name
Email
How did you find us?
Newsletter?
yes, please
drop us a line
Send it!
Lee Taylor
7,61116 gold badges33 silver badges48 bronze badges
asked Oct 18, 2020 at 23:21
Apart from all CSS and inline styles one could think of, in this particular situation [i.e. just two short words] the easiest way to achieve that is to put a "non-breaking space" HTML entity between the words "yes" and "please" instead of the normal space. So instead of "yes, please" your text [in the code] would be yes, please
answered Oct 18, 2020 at 23:27
JohannesJohannes
60.8k17 gold badges63 silver badges119 bronze badges
4
📛📛 Nền Tảng tới Tương lai 📛📛 ✨ ❤🧡💛 Chúc các Bạn và Gia đình Năm mới Vạn sự Như Ý, An Khang Thịnh Vượng, Sức khỏe Dồi dào! ❤🧡💛 ✨ ❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜 ✨
Chương trình học
I have a long text inside a div with defined width:
Nội dung chính
- Not the answer you're looking for? Browse other questions tagged html css or ask your own question.
- How do I keep text on the same line in CSS?
- How do I stop text from going to the next line in CSS?
- How do you keep a sentence in one line CSS?
- How do I make text stay on the same line in HTML?
HTML:
Stack Overflow is the BEST!!!
CSS:
div {
border: 1px solid black;
width: 70px;
}
How could I force the string to stay in one line [i.e., to be cut in the middle of "Overflow"]?
I tried to use overflow: hidden, but it didn't help.
asked Mar 8, 2011 at 12:16
Misha MoroshkoMisha Moroshko
160k220 gold badges491 silver badges726 bronze badges
1
Try this:
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
answered Mar 8, 2011 at 12:20
0
In your CSS section, use white-space: nowrap;.
answered Mar 8, 2011 at 12:18
Rob AgarRob Agar
12.2k5 gold badges45 silver badges59 bronze badges
div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Stack Overflow is the BEST!!!gogaz
2,1931 gold badge24 silver badges31 bronze badges
answered Oct 5, 2016 at 6:35
I made a fiddle:
//jsfiddle.net/audetwebdesign/kh4aR/
RobAgar pointed out white-space:nowrap.
A couple of things here: You need overflow: hidden if you don't want to see the extra characters poking out into your layout.
Also, as mentioned, you could use white-space: pre [see EnderMB], keeping in mind that pre will not collapse white space whereas white-space: nowrap will.
answered Mar 8, 2011 at 13:15
Marc AudetMarc Audet
44.8k10 gold badges61 silver badges82 bronze badges
div {
display: flex;
flex-direction: row;
}
was the solution that worked for me. In some cases with div-lists, this is needed.
Some alternative direction values are row-reverse, column, column-reverse, unset,
initial, and inherit. Which do the things you expect them to do.
answered Aug 4, 2018 at 18:48
Give this a try. It uses pre rather than nowrap as I would assume you would want this to run similarly to , but either will work just fine:
div {
border: 1px solid black;
max-width: 70px;
white-space: pre;
}
//jsfiddle.net/NXchy/11/
answered Mar 8, 2011 at 12:23
Mike BMike B
12.6k20 gold badges84 silver badges109 bronze badges
None of the previous answers worked for me.
There are instances where regardless what you do, and depending on the system [Oracle Designer: Oracle 11g - PL/SQL], divs will always go to the next line, in which case you should use the span tag instead.
This worked wonders for me.
Just Your Text ||
answered Aug 20, 2013 at 13:15
1
in span you need to add : { display: block; }
span {
width: 70px;
border: 1px solid black;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Stack Overflow is the BEST!!!Ged Flod
1,3891 gold badge10 silver badges27 bronze badges
answered May 25 at 15:00
Try setting a height, so the block cannot grow to accommodate your text, and keep the overflow: hidden parameter.
Here is an example of what you might like if you need to display two lines high:
div {
border: 1px solid black;
width: 70px;
height: 2.2em;
overflow: hidden;
}
answered Mar 8, 2011 at 12:18
Wouter SimonsWouter Simons
2,7761 gold badge18 silver badges15 bronze badges
4
Not the answer you're looking for? Browse other questions tagged html css or ask your own question.
How do I keep text on the same line in CSS?
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
How do I stop text from going to the next line in CSS?
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line [in the code].
How do you keep a sentence in one line CSS?
You should try white-space: nowrap; as that will probably fix your problem.
How do I make text stay on the same line in HTML?
You can force the content of the HTML