0

Есть 3 inline-flex. Столкнулся с такой проблемой: при уменьшении экрана, когда слово не вмещается в 1 строку, вместо того, чтобы срабатывало разделение

word-wrap: break-word;

и перенос на вторую строку, слово почему-то обрезается. Как это решить?

Код

body {
  background: #F2F5F7;
}

.radio-inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 33.3%;
  height: 85px;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  border-right: 1px dashed #C0C7DC;
  border-bottom: 2px solid transparent;
  background: #FFFFFF;
  word-wrap: break-word;
  box-sizing: border-box;
}

.radio-inline:last-of-type {
  border-right: none;
}

input[type="radio"] {
  display: none;
}
<div class="radioblock">
  <label class="radio-inline"><input type="radio" name="radiotype">Direct Website</label><label class="radio-inline"><input type="radio" name="radiotype">Marketplace</label><label class="radio-inline"><input type="radio" name="radiotype">Two types</label>
</div>

2 ответа 2

2

flex не препятствует работе word-wrap, но иногда странно взаимодействует с textNode (текстом без обёртки). Можно использовать <span> для корректного переноса слов

body {
  background: #F2F5F7;
}

.radio-inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 33.3%;
  height: 85px;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  border-right: 1px dashed #C0C7DC;
  border-bottom: 2px solid transparent;
  background: #FFFFFF;
  word-wrap: break-word;
  box-sizing: border-box;
}

.radio-inline:last-of-type {
  border-right: none;
}
.radio-inline span{
  display:block;
  width:100%;
}

input[type="radio"] {
  display: none;
}
<div class="radioblock">
  <label class="radio-inline"><input type="radio" name="radiotype"><span>Direct Website</span></label><label class="radio-inline"><input type="radio" name="radiotype"><span>Marketplace</span></label><label class="radio-inline"><input type="radio" name="radiotype"><span>Two types</span></label>
</div>

1

Flex препятствует корректной работе word-wrap. Если нужно, чтобы переносились длинные слова, используйте inline-block либо принудительно расставляйте переносы в длинных словах с помощью &shy;

Пример с inline-block:

function uniqueHeight() {
    let items = $('.radio-inline'),
		heights = [],
		tallest;
		
		function normalizeHeights() {
			items.each(function() {
				heights.push($(this).outerHeight()); 
			});
			tallest = Math.max.apply(null, heights);
			items.each(function() {
				$(this).css('min-height',tallest + 'px');
			});
		};
		normalizeHeights();

		$(window).on('resize orientationchange', function () {
			tallest = 0, heights.length = 0;
			items.each(function() {
				$(this).css('min-height','0');
			}); 
			normalizeHeights(); 
		});
	}
	uniqueHeight();
body {
  background: #F2F5F7;
}
.radio-inline {
  display: inline-block;
  vertical-align: top;
  width: 33.3%;
  padding: 35px 0;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  border-right: 1px dashed #C0C7DC;
  border-bottom: 2px solid transparent;
  background: #FFFFFF;
  box-sizing: border-box;
  word-wrap: break-word;
}
.radio-inline:last-of-type {
  border-right: none;
}
input[type="radio"] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioblock">
<label class="radio-inline"><input type="radio" name="radiotype">Direct WebsiteWebsite</label><label class="radio-inline"><input type="radio" name="radiotype">Marketplaceplace</label><label class="radio-inline"><input type="radio" name="radiotype">Two types</label>
</div>

Пример с &shy;:

body {
  background: #F2F5F7;
}

.radio-inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 33.3%;
  height: 85px;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  border-right: 1px dashed #C0C7DC;
  border-bottom: 2px solid transparent;
  background: #FFFFFF;
  word-wrap: break-word;
  box-sizing: border-box;
}

.radio-inline:last-of-type {
  border-right: none;
}

input[type="radio"] {
  display: none;
}
<div class="radioblock">
  <label class="radio-inline"><input type="radio" name="radiotype">Direct Website</label><label class="radio-inline"><input type="radio" name="radiotype">Market&shy;place&shy;Market&shy;place</label><label class="radio-inline"><input type="radio" name="radiotype">Two types</label>
</div>

4
  • спасибо! Но, ваш пример с inline-block к сожалению, не универсальный - при уменьшении экрана, высота блока с 2мя строками увеличивается относительно других блоков, а должна сохраняться. А с &shy; - это для небольших блоков и с доступом к коду хорошо, но если используется в больших блоках текста в постах, которые пишут копирайтеры, то это не вариант, как вы понимаете..
    – Вася
    Commented 2 окт. 2019 в 11:04
  • @Вася, ну, для inline-block можно придумать решение, чтобы высота подстраивалась. А насчёт &shy - это ж был пример для Вашего вопроса. У Вас в вопросе никаких больших блоков текста нет. В таком случае придётся придумывать какие-то "костыли", чтобы word-wrap работал с flex Commented 2 окт. 2019 в 11:08
  • "А насчёт &shy - это ж был пример для Вашего вопроса. " @humster_spb да, для примера все ок - я его и зачел. Это была попытка порассуждать как найти универсальное решение: получается, что только костыль. А поводу inline-block не совсем понял про какое решение вы говорите - на @media quaries просматривать высоту?
    – Вася
    Commented 2 окт. 2019 в 11:12
  • 1
    @Вася, нет, media quaries просматривать высоту - это плохой вариант. Можно добавить немного js, например (я дополнил ответ) Commented 2 окт. 2019 в 11:48

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.