Влияет ли изменение свойства width на текст сетки? - PullRequest
Новая
       19

Влияет ли изменение свойства width на текст сетки?

1 голос
/ 13 марта 2019

У меня есть HTML-документ, и внутри у меня есть элемент, давайте назовем его myElement, теперь myElement имеет display: grid. myElement также имеет width: 60%, это свойство ширины, похоже, меняет способ, которым переполнение текста работает над его дочерними элементами сетки - текст выходит за пределы 60% ширины сетки. Есть ли обходной путь, чтобы переполнение текста все равно работало правильно, или мне просто нужно иметь дело с сеткой, занимающей 100% ее пространства?

Вот фрагмент кода (не очень хорошее представление) 

#events-grid {
    background-color: #14ffec;
    display: grid;
    font-size: 20px;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
    margin: 0 20%;
    padding: 20px;
    width: 60%;
}

.event {
     grid-column: 1/3;
 }

.dates {
     grid-column: 3/4;
}

.summary-event {
    grid-column: 4/9;
}

.source-event {
     grid-column: 9/11;
}
<div id="events-grid">
    <span class="event">Random Event</span>
    <span class="dates">Random Date</span>
    <span class="summary-event">Random text about the event that means nothing</span>
    <span class="source-event">Lorem ipsum dolor sit amet.</span>
</div>

Это изображение (синий - это 60% сетка, серый - это фон, а текст просто произвольный - замена ссылки)

enter image description here

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

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Это похоже на ответ Энди, это обновленное имя, но я тоже нашел решение, используйте overflow-wrap на #events-grid и установите значение overflow-wrap: break-word Как документ MDN наoverflow-wrap говорит:

Свойство CSS overflow-wrap применяется к встроенным элементам, определяя, должен ли браузер вставлять разрывы строк внутри строки, которая в противном случае была бы неразрывной, чтобы текст не переполнял строковое поле.

0 голосов
/ 14 марта 2019

Одна вещь, которую вы могли бы сделать, это добавить word-break: break-all к .summary-event. Для других детей все еще может быть непросто, поэтому вы, возможно, захотите добавить некоторые новые правила сетки (с помощью запроса @media), когда экран преодолеет определенный минимальный порог. 

#events-grid {
    background-color: #14ffec;
    display: grid;
    font-size: 20px;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
    margin: 0 20%;
    padding: 20px;
    width: 60%;
}

.event {
     grid-column: 1/3;
 }

.dates {
     grid-column: 3/4;
}

.summary-event {
    grid-column: 4/9;
    word-break: break-all;
    /* Option 2: word-wrap: anywhere; 
       Option 3: overflow-wrap: anywhere;
    */
}

.source-event {
     grid-column: 9/11;
}
<div id="events-grid">
    <span class="event">Random Event</span>
    <span class="dates">Random Date</span>
    <span class="summary-event">Randomtextabouttheevent</span>
    <span class="source-event">Lorem ipsum dolor sit amet.</span>
</div>
...