Я хочу немного растянуть текст, но «text-align: justify» не делает то, что я хочу - PullRequest
Новая
       1

Я хочу немного растянуть текст, но «text-align: justify» не делает то, что я хочу

0 голосов
/ 10 октября 2018

Я хочу сделать так, чтобы это выглядело так:

image

How do I make it looks like the image provided?(Only with CSS and HTML).



    Webpage With Style

     #main {} #title {text-align: center;позиция: относительная;верх: 125 пикселей;размер шрифта: 33 пикселя;} # img-div {} #image {position: родственник;дисплей: блок;поле слева: авто;поле справа: авто;верх: 147;} # img-caption {margin: 160px 80px;выравнивание текста: выравнивание;размер шрифта: 16 пикселей;} / * позиция: относительная;выровнять себя: право;верх: 180px;* / body {background-color: aqua;} # млрд {позиция: относительная;выравнивание текста: по центру;верх: -510;размер шрифта: 16 пикселей;}   Доктор Норман Борлауг Человек, который спас миллиард жизней
imageДоктор Норман Борлоуг, второй слева, обучает биологов в Мексике тому, как увеличить урожай пшеницы - часть его пожизненной войны с голодом.

см. По адресу: 

    #img-caption{

        margin: 160px 80px;
        text-align: justify;
        font-size: 16px;

Если я уберу функцию «justify», это не будет иметь значения, поэтому она не работает.Я хочу немного растянуть текст, как показано на рисунке, и сделать так, чтобы он выглядел точно так же.

Ответы [ 3 ]

0 голосов
/ 10 октября 2018

Если я удалю функцию «оправдать», это не будет иметь значения, поэтому она не будет работать.

Нет, конечно, это не так, потому что text-align: justify по определению оправдывает текст во всех строках , кроме последней - но у вас только есть одна строка текста здесь для начала, так что также является «последней» строкой.

Это сделано для того, чтобы избежать ситуаций, когда текст течет так, что, скажем, только два (или три) слова составляют последнюю строку, а вызатем возьмите одно слово слева (одно посередине) и одно справа, что будет выглядеть ужасно.

Вы можете использовать text-align-last, чтобы явно указатьВыравнивание по последней строке текста.

0 голосов
/ 10 октября 2018

Ваше изображение переполняет его контейнер, и заголовок относительно позиционированного изображения содержится.Вы можете содержать свое изображение, задав его ширину <= 100%.Это даст ему и заголовку одинаковое количество горизонтального пространства. </p> 

#main {}

#title {
  text-align: center;
  position: relative;
  font-size: 33px;
}

#img-div {}

#image {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#img-caption {
  text-align: center;
  font-size: 16px;
}

body {
  background-color: aqua;
}

#billion {
  position: relative;
  text-align: center;
  font-size: 16px;
}
<body>

    <main id="main">


        <h1 id="title">Dr. Norman Borlaug</h1> 

        <div id="billion">The man who saved a billion lives</div>

        <div id="img-div">

            <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"id="image">

            <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>


        </div>

    </main>

</body>

Если вы хотите, чтобы изображение и заголовок переполняли контейнер (хотя я не знаю, почему вы это сделали), вы можете задать для заголовка абсолютное позиционирование,установите пустое пространство в nowrap, и отрегулируйте ширину и поля в соответствии с этим: 

       #main{
       }

        #title{
            text-align: center;
            position:relative;
            top: 125px;
            font-size: 33px;
        }

        #img-div{
          width: 100%;
          border: 1px solid red;
          overflow: visible;
        }

        #image {
            position:relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            top: 147;
        }

        #img-caption{
            position: absolute;
            width: 70%;
            margin: 1% 15%;
            text-align: center;
            font-size: 16px;
            white-space: nowrap;

        }

        /*   position:relative;
            align-self: right;
            top: 180px;  */

        body{
            background-color: aqua;
        }

        #billion{
            position: relative;
            text-align: center;
            top: -510;
            font-size: 16px;

        }
<body>

    <main id="main">


        <h1 id="title">Dr. Norman Borlaug</h1> 

        <div id="billion">The man who saved a billion lives</div>

        <div id="img-div">

            <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"id="image">

            <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>


        </div>

    </main>

</body>
0 голосов
/ 10 октября 2018

Изменение / увеличение letter-spacing

Свойство CSS с межбуквенным интервалом задает интервал между текстовыми символами.

MDN 

#main {}

#title {
  text-align: center;
  position: relative;
  font-size: 33px;
}

#img-div {}

#image {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#img-caption {
  text-align: center;
  font-size: 16px;
  letter-spacing: .5px
}

body {
  background-color: aqua;
}

#billion {
  position: relative;
  text-align: center;
  font-size: 16px;
}
<main id="main">

  <h1 id="title">Dr. Norman Borlaug</h1>

  <div id="billion">The man who saved a billion lives</div>

  <div id="img-div">

    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" id="image">

    <div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>

  </div>

</main>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...