Главная » Языки программирования

Html style one line

Содержание
  1. How to Limit the Text Length to One Line with CSS
  2. Example of limiting the text length to one line by clipping the line:
  3. Result
  4. Example of limiting the text length to one line by adding an ellipsis:
  5. Example of limiting the text length to one line by adding strings:
  6. css overflow — only 1 line of text
  7. 10 Answers 10
  8. CSS to style one line of text
  9. 4 Answers 4
  10. How do I make HTML Elements appear on one line?
  11. 7 Answers 7

How to Limit the Text Length to One Line with 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.

Here, you will find all the three above-mentioned methods of limiting the text length to one line.

Example of limiting the text length to one line by clipping the line:

html> html> head> title>Title of the document title> style> div < white-space: nowrap; overflow: hidden; text-overflow: clip; > style> head> body> div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> body> html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Читайте также:  Add your own custom css here elementor

The white-space property with the “nowrap” value and the overflow property with the “hidden” value are required to be used with the text-overflow property.

Example of limiting the text length to one line by adding an ellipsis:

html> html> head> title>Title of the document title> style> .text < white-space: nowrap; overflow: hidden; text-overflow: ellipsis; > style> head> body> div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> body> html>

The value of the text-overflow property used in the next example adds strings at the end of the line only in Firefox.

Example of limiting the text length to one line by adding strings:

html> html> head> title> Title of the document title> style> div.text < white-space: nowrap; overflow: hidden; text-overflow: "----"; > style> head> body> div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> body> html>

Источник

css overflow — only 1 line of text

When I insert, into that div , a long line of text, it’s breaking to a new line and displays all the text. What I want is to have only one line of text that will not line-break. When the text is long, I want this overflowing text to disappear. I was thinking about setting the height but it seems to be wrong. Maybe if I add height that is the same as the font, it should work and not cause any problems in different browsers? How can I do that?

Читайте также:  Python syntaxerror cannot assign to conditional expression

10 Answers 10

If you want to restrict it to one line, use white-space: nowrap; on the div.

But then it doesn’t show the ellipsis if the text goes beyond the dimension specified. stackoverflow.com/questions/26342411/…

It works, great. But I need . if there are more character to show because when length of line long and it goes out of written div.

This acts weird if the hidden text contains hyper links. If I were to tab through the page it would cause the link in the hidden text to scroll onto the screen, when it should be hidden.

If you want to indicate that there’s still more content available in that div, you may probably want to show the «ellipsis»:

This should be in addition to white-space: nowrap; suggested by Septnuits.

Also, make sure you checkout this thread to handle this in Firefox.

I believe you must use text-overflow: ellipsis; with overflow: hidden; and white-space: nowrap; to make it work

caniuse.com/#feat=text-overflow aka. yes, you can. Consider putting the whole content in the title attribute, so the user has still access to it.

mine just shows in one line and doesn’t populate the DIV before showing the ellipsis. stackoverflow.com/questions/26342411/… (jsfiddle.net/ofrj55j4/20)

You can use this css code:

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box. It can be clipped (i.e. cut off, hidden), display an ellipsis (‘…’, Unicode Range Value U+2026).

Note that text-overflow only occurs when the container’s overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

Источник

CSS to style one line of text

I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div. I can’t seem to get this to work. what I am missing? Current HTML:

.accessSlogan < position: relative; float: right; display: inline; >.access-slogan-text < display:inline; font-size: 1.2em; line-height: 2em; padding-right: 6px; vertical-align: text-bottom; >.access-slogan-number

4 Answers 4

Use the tag and style accordingly.

 
GIVE US A CALL AT ###.###.### 
 
.accessSlogan < float: right; >.accessSlogan strong

The point is to use the existing «semantic» HTML to work with you and avoiding over-complicating things. The tag is what you mean, so use it:-)

The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.

I would argue isn’t semantically correct here at all, just because it is to be displayed bold or in larger text doesn’t indicate stronger importance. Also, if you’re really talking semantics then why is the container still a ?

You’re right; probably changing it to something like:

###.###.###

would be more appropriate (and less afflicted with divitus).

Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it’s hard to know if that’s necessary or not.

At it’s simplest this will achieve it:

.access-slogan < float: right; text-transform: uppercase; >.access-slogan .access-slogan-number < font-size: 1.8em; >
Give us a call at  
 
 
 
 
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share 
 
)" title="">Improve this answer 
 
 
 
 
 
 
 
 
answered Mar 5, 2011 at 16:58
Add a comment |
0

I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?

)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share
)" title="">Improve this answer
answered Mar 5, 2011 at 16:01
Add a comment |
0

use instead of . It will solve your problem

 
call me at 0000-000

Источник

How do I make HTML Elements appear on one line?

@JeddDryden You can but you really shouldn't, id s should be unique w3.org/TR/html401/struct/global.html#adef-id. Using the same id can cause problems, in this case class would be more appropriate.

You can use a class in CSS with preceding dot: .running < attribute: value; >. In HTML you just declare it like this:

. And also don't use snake case in CSS. CSS is not case-sensitive and capital letters in your ids and classes don't make a lot of sense. It is better to write

and in CSS #not-runing < >.

7 Answers 7

See https://stackoverflow.com/a/14033814/5011843 for a good comparison of display options.

and for each line add a
tag to it

SERVERS:
 
Server 1 Status:
Running
 
Server 2 Status:
Not Running
 
Server 3 Status:
Running

Change "id" into class so it could be more specific and it won't apply to all your webpage, just the running and notRunning. CSS:

Try like this: Demo

Edit: Demo

In your code there is a typo in this class

For next line, you can use clear or
according to your requirement

Here is my solution which lines them pairwise:

#running < color: green; font-weight: bold; >#notRunning < color: red; font-weight: bold; >h3, p < display: inline; >h3::after < content: " "; >p::after

The assumption is that I can't access the HTML and have to do everything in CSS. The line display: inline just puts all headings and paragraphs on one line. With the pseudoselector ::after we achieve some space in each pair and between the pairs vertically, and the line display: block takes care for a newline after every paragraph, thus putting every pair on single line.

Источник

Оцените статью
© 2024 Программирование