Как мне сохранить входные данные: флажок и тег в одной строке? - PullRequest
Новая
       9

Как мне сохранить входные данные: флажок и тег в одной строке?

0 голосов
/ 24 сентября 2018

У меня есть разметка вот так: 

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" 
      /><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

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

[] Long description of a ve

Вместо этого я получаю следующее: 

[]
Long description of a very interesting article

Эта строка остается на одной строке, но она выходит за границы столбцов..

Два вопроса:

  1. Как сохранить текст в той же строке, что и флажок, независимо от его длины?

  2. Как мне обрезать текст (см. Разметку ниже - я использую white-space: nowrap; и overflow-x: hidden;)?

CSS:

Я используюследующий SCSS: 

div.radio-choice.score {
    a {
        overflow-x: hidden;
        white-space: nowrap;
    }
    &:hover {
        overflow-x: visible;
    }
    input[type="radio"].myradio {
        width:  auto;
        display: inline;
    }
}

Когда я использовал ряд тегов span в теге p, я получил желаемое поведение.Если я помещаю теги input и a в диапазон, я получаю то же самое поведение - тег a начинается со следующей строки, и его текст выпадает вправо.

Это можетбудьте поучительны: когда я пользуюсь инспектором DOM, я вижу, что для правил для div.radio-choice.score a пробита строка overflow-x: hidden;, а для строки white-space: nowrap; - нет.Учитывая, что в других статьях S / O говорится об укорочении якорного текста, почему это правило будет соблюдено?

Для проблемы с переносом строк мое текущее решение состоит в том, чтобы установить флажок в margin-left: -2em;, но я ожидаюесть лучший способ сделать это.

Что касается того, почему мой якорный текст не усекается, мне придется сузить его.Сейчас я работаю с 500 линиями SCSS, и это может легко помешать чему-то другому.Но в то же время я надеюсь, что кто-то, кто столкнулся с этим и нашел решение, или имеет хорошее внутреннее представление о механике CSS, мог бы взвесить.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Оба тега input и a имеют display: inline-block, чтобы держать их в одной строке.

Я добавил многоточие для переполнения текста гиперссылки. 

div.radio-choice.score {
  max-width: 150px; /* Assumption to create the effect */
}

a {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px; /* Assumption to create the effect */
  display: inline-block;
}

a:hover {
  overflow-x: visible;
}

input[type="radio"].myradio {
  display: inline-block;
}
<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" /><!--
  --><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>
0 голосов
/ 24 сентября 2018

Это должно работать. 

a {
  overflow-x: hidden;
  white-space: nowrap;
}
a:hover {
  overflow-x: visible;
}
input[type="radio"].myradio {
  width:  auto;
  display: inline;
}
    
/*
  [ Solution ]
*/
.radio-choice {
  width: 300px;
  display: flex;
  border: 4px grey solid;
  padding: 4px;
}

a {
  text-overflow: ellipsis;
}
<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" />
  <a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>
...