Css word in one line - Word и Excel - помощь в работе с программами

I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid

jsFiddle

html

<div class="garage-row">
    <a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&amp;VID=4">
        <div class="garage-title">1996 Land Rover Defender</div>
        <div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
    </a>
    <div class="user-meta">
        <b>
            <a href="{block_1.row.U_COLUMN_2}">Hobbs92</a>
        </b>
    </div>
</div>

css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);


.garage-row {
    border: 1px solid #FFFFFF;
    float: left;
    margin-right: 5px;
    padding: 12px;
    position: relative;
    width: 204px;
}
    .garage-row img{}
.garage-image {
    background-position: center center;
    display: block;
    float: left;
    max-height: 150px;
    max-width: 204px;
    overflow: hidden;
    position: relative;
}

.user-meta {
    background: none repeat scroll 0 0 #2C3539;
    color: #FFFFFF;
    float: left;
    padding: 10px;
    position: relative;
    width: 184px;
}
img {
    border-width: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.garage-title {
    clear: both;
    display: inline-block;
    overflow: hidden;
}
.garage-row-title {
    font-size: 22px;
    font-weight: bold;
}
a:link {
    color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;

I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.

Источник

Solutions with the CSS text-overflow property

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:

<!DOCTYPE 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.

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:

<!DOCTYPE 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 <string> 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:

<!DOCTYPE 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>

Источник

In this tutorial, you will learn to align text and image in the same line using CSS in HTML.

Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.

Using the method outlined above will ensure that your images and text are both aligned on the same line of text. Let’s take a look at an example of code below.

How To Align Image and Text In Same Line In HTML Using CSS

In general, there are two ways to make sure everything is arranged up in a line. But I think the second method is better because it works in all situations.

1. Using Float Property Of CSS

Now let us see how the float property of the CSS can help us achieve this to get the images and text in the same line.

<!DOCTYPE html>
<html>
<body>
  <style> 
    body {  
      background-color: black;  
    } 
    img {  
      width: 200px; 
      float: left; 
      margin-right: 10px; 
    } 
  </style> 
   
  <img src="testImage.jpg" /> 
  <div> 
    The Text That you want to aling long in a line.
  </div> 

</body>
</html>

Output:

As you can see in the above output, I was able to align the image and text in a single line by utilizing the float:left alignment in the style section of the image.

Although the above method has one disadvantage, when you try to resize the screen, the image and text will no longer be aligned in a single line and will instead stack up. In order to overcome this disadvantage, you will need to use the flexbox technique.

2. Using Flexbox in CSS

So, when you use the above solution and try to change the size of the screen, the text and image will no longer be on the same line. To solve this problem, I will be using the flexbox. This will make sure that both images and text are always in line, no matter how big the screen is.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container"> 
      <img src="testImage.jpg" />
      The Text That you want to aling long in a line.
    </div> 
  </body>
</html>

body {  
    background-color: black;  
  } 
  
.container{
    display: flex;
}

img {  
    width: 200px;
  }

Output:

As you can see in the above image, flexbox makes sure that the image and text stay in one line, no matter how big or small the screen is. You can see this in the picture above.

Wrap Up

I hope you learned how to put images and text in the same line with CSS and HTML. I’ve given you two ways to solve this problem, but I’d rather you use the second one because it’s the most up-to-date method in the field.

Make sure to tell me if you know of another way to do this that I haven’t talked about above. I’ll add it here if I can find the time.

Further Read:

How To Make A Button Link To Another Page In HTML
How To Calculate Time Complexity And Big O Of Algorithm
Python User Input from Keyboard

Источник

Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.

Для этого есть замечательное CSS3 свойство text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — Текст который не помещается обрезается.

ellipsis — Текст обрезается и в конце мы увидим троеточие.

Пример использования:

div{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
}

Если вы знаете другие варианты или нашли недочеты в статье — пишите в комментариях, обязательно подправим.

Источник

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	/*

	This snippet is to format text in only a single line using only CSS.
	It’s intended to hide text bigger than the container using a ellipsis if there is more text available
	and also hides extra lines of text using the n or <br> elements as line breaks.

	Please note that if you are using r to create new lines of text (eg: Mac 9 and before) you need to replace those
	with n or come around with another solution(the ‘pre’ setting of the `white-space` property only recognize r as
	line separator).

	You can see an example here: https://jsfiddle.net/devconcept/5ut2kcdL/

	*/

	.line-container {
	width: 200px;
	height: 20px; /* Change height to match your desired container */
	overflow: hidden;
	}
	.single-line {
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: pre;
	}

Источник