Ширина текста css: Расстояние между буквами, строками, ширина табуляции в CSS

Содержание

css — Ширина блока по размеру текста

Вопрос задан 4 года 3 месяца назад

Изменён 4 года 2 месяца назад

Просмотрен 421 раз

Как сделать так, чтобы ширина блока узнать больше была по размеру текста?

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  font-family: 'Raleway', sans-serif;
}

div{
  overflow: hidden;
}

.middle{
  display:flex;
  justify-content:center;
  align-items:center;
}

.top_part {
  width: 100%;
  height: 100%;
  background: url("http://5gfuture.ru/wp-content/uploads/2017/08/truck-2391940_1280.jpg") center center no-repeat;
  background-size: cover;
}
.  top_part .top_part_middle {
  width: 65%;
}
.top_part .top_part_middle .top_part_left {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.top_part .top_part_middle .top_part_left .top_part_left_text {
  display: flex;
  flex-direction: column;
}
.top_part .top_part_middle .top_part_left .top_part_left_text h2 {
  font-size: 50px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}
.top_part .top_part_middle .top_part_left .top_part_left_text a {
  background-color: #e01f3d;
  color: white;
}
.top_part .top_part_middle .top_part_right {
  width: 20%;
}

<div>
    <div>
        <div>
            <div>
                <!-- Этот текст должен меняться-->
                <h2>lorem ipsum dolor sit amet consectetur adipiscing</h2>
                <a href="#">Узнать больше</a>
            </div>
            <div>
                <div>
                    <img src="" alt="">
                    <h2>lorem ipsum dolor sit amet consectetur adipiscing</h2>
                </div>
                <div>
                    <img src="" alt="">
                    <h2>lorem ipsum dolor sit amet consectetur adipiscing</h2>
                </div>
                <div>
                    <img src="" alt="">
                    <h2>lorem ipsum dolor sit amet consectetur adipiscing</h2>
                </div>
            </div>
        </div>
        <div>
            <!-- здесь будет форма-->
        </div>
    </div>
</div>

css
css3

Вы сами задали 100%

. top_part .top_part_middle .top_part_left .top_part_left_text a {
  width: 100%;
  background-color: #e01f3d;
  color: white;
}

UPD: Это потому что элемент по умолчанию stretch, задайте блоку

.top_part_left_text {
  align-items: flex-start; 
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как задать ширину контента для текста в input

Как показано на скриншоте существен ширина формы для текста, как её задать не знаю. Побывал обычные padding’и, задеться ширина для input но не для ширины текста в нём.

HTML код контента в блоке в котором находиться input

.page-subscribe input {
  border: solid 2px #4265B7;
  border-radius: 50px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
  width: 100%;
  display: block;
  padding: 25px 35px;
  color: #fff;
}

<div>
  <div>
    <div>
      <h3><span>Subscribe</span>Signup For A Trail</h3>
      <p>Create your free account now & get 30 days free <br> trail No credit card required</p>
      <!-- Нужный элемент -->
      <input type="email" placeholder="Enter your email address">
      <!-- Нужный элемент -->
      <button type="submit">Subscribe</button>
    </div>
    <div>
      <img src="img/Robot.
  png" alt="Robot">
    </div>
  </div>
</div>

html
css
css3
html5

Определите ширину кнопки Subscribe, сделайте фиксированный размер в CSS для этой кнопки, а уже инпуту выставите padding-right: *ширина кнопки + желаемый отступ от неё*px;

Вот пример:

.block {
  display: block;
  width: 100%;
  max-width: 220px;
  position: relative;
}

.block input[type="text"] {
  display: inline-block;
  width: 100%;
  height: 40px;
  border-radius: 40px;
  padding-left: 10px;
  padding-right: 85px; /* ширина кноки + желаемый отступ */
  text-overflow: '..'; /* необязательно */
  border: 2px solid green;
  box-sizing: border-box;
}

.block input[type="button"] {
  display: inline-block;
  width: 75px; /* ширина кнопки фиксирована */
  height: 32px;
  border-radius: 32px;
  border: 2px solid darkgreen;
  background: green;
  color: #fff;
  margin: 4px;
  position: absolute;
  top: 0; right: 0;
}

<div>
  <input type="text" value="bla-bla-bla-bla-bla-bla-bla">
  <input type="button" value="subscribe">
</div>

Не заморачивайся.
укажи фиксированную ширину! Width: 150px;
а остальное добей отступом padding

width:150px;
padding-right:20px;

или еще способ.

<div>
   <input type="email"/>
</div>

css:

.m1{
width:100%;
}
.m1 > input{
width:90%;
padding-right:10%;
}

Ввел для imput ограничение на ввод до 35 символов и мне этого хватило.

<div>
    <div>
        <div>
            <h3><span>Subscribe</span>Signup For A Trail</h3>
            <p>Create your free account now & get 30 days free <br> trail No credit card required</p>
            <!-- Нужный элемент -->
            <input type="email" placeholder="Enter your email address" maxlength="35">
            <!-- Нужный элемент -->
            <button type="submit">Subscribe</button>
        </div>
        <div>
        <img src="img/Robot. png" alt="Robot">
        </div>
    </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

html — Как ограничить ширину текста

спросил 9 лет, 9 месяцев назад

Изменено 11 месяцев назад

Просмотрено 162к раз

Я хотел бы ограничить ширину блока текста, чтобы он выглядел так, будто в конце каждой строки есть разрыв.

Примерно так:

 Тексттттттттттттттттттттт
ттттттттттттттттттттттттт
ттттттттттттттттттттттттт

Отсюда:

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Я попытался указать ширину div или p, но у меня это не сработало. Какие-либо предложения?

html
css

Вы можете применить CSS следующим образом:

 div {
   перенос слов: прерывание слова;
   ширина: 100 пикселей;
}

Обычно браузер не разбивает слова, но перенос слов: перенос слова; также заставит его разбивать слова.

Демонстрация: http://jsfiddle.net/Mp7tc/

Дополнительная информация о переносе слов

 дисплей: встроенный блок;
максимальная ширина: 80%;
высота: 1,5см;
переполнение: скрыто;
переполнение текста: многоточие;
пробел: nowrap;

Попробуйте

 Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Вы можете использовать word-wrap : break-word;

использовать свойство css word-wrap: break-word;

см. пример здесь: http://jsfiddle.net/emgRF/

Попробуйте это:

<стиль> п { ширина: 100 пикселей; перенос слов:разрывное слово; }

Loremipsumdolorsitamet,consecteturadipiscingelit.Fusce non nisl non ante malesuada mollis quis ut ipsum. Cum sociis natoque penatibus et magnis dis роженицы, nascetur ridiculus mus. Cras ut adipiscing dolor. нунк конге, Tellus vehicula mattis porttitor, justo nisi sollicitudin nulla, rhoncus lectus lacus ID турпис. Vivamus diam lacus, egestas nec bibendum eu, mattis eget risus

Я думаю, что вы пытаетесь сделать перенос длинного текста без пробелов.

посмотрите на это: Hyphenator.js и это демо.

 <стиль>
     п{
         ширина: 70%
         перенос слов: прерывание слова;
     }

В моем случае это не сработало. Он работал нормально после добавления следующего стиля.

 <стиль>
     п{
        ширина: 70%
        слово-разрыв: разбить все;
     }

 word-break:break-all;

did the job for me

from:

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

to:

qqqqqqqqqqqqqqqqq

qqqqqqqqqqq

 word-wrap: ...

не сработало

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

для небольших однофайловых проектов index.html. Конечно, для реалистичных проектов стили должны находиться в отдельном файле css.

 Зарегистрируйтесь или войдите в систему   Зарегистрируйтесь с помощью Google
                         
  Зарегистрироваться через Facebook
                         
  Зарегистрируйтесь, используя электронную почту и пароль
                         
   Опубликовать как гость 
   Электронная почта 
  Требуется, но никогда не отображается 
 
                          
 Опубликовать как гость  
            
              Электронная почта 
  Требуется, но не отображается 

            

                                    
                                    
                               css - Ширина равна содержимому 
   У меня возникли проблемы со свойством ширины CSS.  У меня есть несколько абзацев внутри div. Я хотел бы сделать ширину абзацев равной их содержимому, чтобы их зеленый фон выглядел как метка для текста. Вместо этого я получаю то, что абзацы наследуют ширину отцовского узла div, которая шире. 
  #контейнер {
  ширина: 30%;
  цвет фона: серый;
}

#контейнер р {
  цвет фона: зеленый;
} 
 <дел>
  Образец текста 1
  Образец текста 2
  Образец текста 3

css
ширина

Я установил ширину как максимальное содержимое, и это сработало для меня.

ширина: максимальное содержание;

По умолчанию теги p представляют собой блока элементов, что означает, что они занимают 100% родительской ширины .

Вы можете изменить их свойство отображения с помощью:

 #container p {
   дисплей: встроенный блок;
}

Но он ставит элементы рядом.

Чтобы разместить каждый элемент на отдельной строке, вы можете использовать:

 #container p {
   ясно: оба;
   плыть налево;
}

_{(Если вы используете float и вам нужно очистить элементы после float, см. эту ссылку для различных методов: http://css-tricks.com/all-about-floats/)}

Демонстрация: http:// jsfiddle.net/CvJ3W/5/

Изменить

Если вы выберете решение с display:inline-block , но хотите сохранить каждый элемент в одной строке, вы можете просто добавить тег после каждого:

 
  Образец текста 1


  Образец текста 2


  Образец текста 3

Новая демонстрация: http://jsfiddle.net/CvJ3W/7/

Решение с встроенным блоком заставляет вас вставлять после каждого элемента.
Решение с float заставляет вас обернуть все элементы разделом "clearfix".

Другим элегантным решением является использование дисплея : таблица для элементов.

С этим решением вам не нужно вставлять разрывы строк вручную (как с inline-block ), вам не нужна оболочка вокруг ваших элементов (например, с поплавками), и вы можете центрировать свой элемент, если вам нужно.

http://jsfiddle.net/8md3jy4r/3/

Добавление дисплея : встроенный блок; к p стиль должен взять из него:

http://jsfiddle.net/pyq3C/

 #container p{
    цвет фона: зеленый;
    отображение: встроенный блок;
}

установить атрибут ширины как: width: fit-content

демо: http://jsfiddle.net/rvrjp7/pyq3C/114

Использование display:inline-block; не будет работать для длинных предложений без пробелов, таких как HiHowAreYouHopeYouAreDoingGood. ..etc , чтобы исправить это, рассмотрите возможность использования word-wrap: break-word; вместо

это сделано для того, чтобы длинные слова могли переноситься на следующую строку, также Facebook используя его

Пример

 #container {
    ширина: 40%;
    цвет фона: серый;
    переполнение: скрыто;
    поле: 10 пикселей;
}
#контейнер р{
    дисплей: встроенный блок;
    цвет фона: зеленый;
}
.flex{
    дисплей: гибкий;
}
#сворачивать {
    ширина: 30%;
    цвет фона: серый;
    переполнение: скрыто;
    поле: 10 пикселей;
}
#обернуть п{
   перенос слов: прерывание слова;
    цвет фона: зеленый;
}

display:inline-block;

<дел> <дел>

С пробелами

Образец текста 1 Образец текста 1 Образец текста 1 Образец текста 1 Образец текста 1 Образец текста 1 Образец текста 1

HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood

css — Ширина блока по размеру текста

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

html — Как задать ширину контента для текста в input

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

html — Как ограничить ширину текста

Опубликовать как гость

Опубликовать как гость

css - Ширина равна содержимому

display:inline-block;

С пробелами

Нет данных (не работает)

word-wrap: break-word;

С пробелами

Нет спецификаций (работает)

Добавить комментарий Отменить ответ

Рубрики