无论如何，我可以根据它包含的文本行数调整 LI 元素的高度吗？ 更多行 = 更高的 LI没有 jQuery

如何解决无论如何，我可以根据它包含的文本行数调整 LI 元素的高度吗？ 更多行 = 更高的 LI没有 jQuery

好吧，我正在制作一个测试软件。现在，我正在制作一个显示答案选项的问题页面。

我将答案选项显示为 li 元素。有时，我问的几个问题有超长的答案选择，它溢出了 li 元素。我目前的解决方案是让 li 足够大以包含最大的答案选项，但现在对于 2 个单词、3 个单词的答案选项看起来很傻。

所以现在，我希望 li 元素的高度基本上根据答案选项的文本行数而改变（而不是溢出，我希望它增长到外行的术语）。

这是相关的片段。

<ul>
  <li className={(this.state.submitted) && (answerkey[question]==='A' ) ? 'correct': (answers[question]==='a' ) && (answerkey[question] !=='A' ) && (this.state.submitted) ? 'wrong': ''}>
    <input type='radio' value='a' id='a-option' name='selector' checked={response==='a' } onChange={this.onChange} />
    <label for='a-option'>
        <div className='adjust-reading-text'>
          {answerchoices[question][0]}
        </div>
      </label>
    <div className='check'></div>
  </li>
  <li className={(this.state.submitted) && (answerkey[question]==='B' ) ? 'correct': (answers[question]==='b' ) && (answerkey[question] !=='B' ) && (this.state.submitted) ? 'wrong': ''}>
    <input type='radio' value='b' id='b-option' name='selector' checked={response==='b' } onChange={this.onChange} />
    <label for='b-option'>
      <div className='adjust-reading-text'>
        {answerchoices[question][1]}
      </div>
    </label>
    <div className='check'></div>
  </li>
  <li className={(this.state.submitted) && (answerkey[question]==='C' ) ? 'correct': (answers[question]==='c' ) && (answerkey[question] !=='C' ) && (this.state.submitted) ? 'wrong': ''}>
    <input type='radio' value='c' id='c-option' name='selector' checked={response==='c' } onChange={this.onChange} />
    <label for='c-option'>
      <div className='adjust-reading-text'>
        {answerchoices[question][2]}
      </div>
    </label>
    <div className='check'></div>
  </li>
  <li className={(this.state.submitted) && (answerkey[question]==='D' ) ? 'correct': (answers[question]==='d' ) && (answerkey[question] !=='D' ) && (this.state.submitted) ? 'wrong': ''}>
    <input type='radio' value='d' id='d-option' name='selector' checked={response==='d' } onChange={this.onChange} />
    <label for='d-option'>
      <div className='adjust-reading-text'>
        {answerchoices[question][3]}
      </div>
    </label>
    <div className='check'></div>
  </li>
</ul>

不要担心与问题无关的反应状态内容，只需知道 {answerchoices[question][3]} 会加载答案选项的文本。

这里是需要改变的东西的css。

.container-reading ul{
  list-style: none;
  margin: 0;
  padding: 20px;
}

.container-reading ul li{
  color: black;
  position: relative;
  display: inline;
  width: 95%;
  font-size: 16px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

解决方法

这可以通过纯 CSS 解决。您已经有一套width。假设百分比解析为实际数字，文本将在达到该宽度时自动换行。但是，宽度不适用于内联元素。改用 display: inline-block。

.container-reading ul {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.container-reading ul li {
  color: black;
  position: relative;
  display: inline-block; /* The change */
  width: 100px; /* Ensure this resolves to an actual value */
  font-size: 16px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

<div class='container-reading'>
  <ul>
    <li>A really really really long piece of text that will cause the wrap to trigger
  </ul>
</div>

,

我认为可能是隐藏元素充当了克隆，因为在 JS 中很难确定元素中文本的长度，所以我们只放置了列表项元素中的文本随着存在的文本量而增长。这将使我们能够获得容器的宽度，并为我们提供文本占用的准确长度（以像素为单位）。我们将其与您的列表项的 clientWidth 进行比较，并找出哪些元素溢出。

我认为为 flexbox 元素设置样式可能更容易，所以我将文本包裹在一个 span 标签中，并将其放在单选输入之后。然后我们给选择器添加一些样式，并将选择器添加到父元素。放置一个 align-items: center 以垂直将输入和文本居中。

const answers = document.querySelectorAll('.container-reading li')

function contOverflown(element) {
  let clone = document.createElement('DIV')
  let output = false
  clone.textContent = element.textContent
  clone.style.visibility = 'hidden'
  clone.style.padding = 0;
  clone.style.border = 'none';
  clone.style.position = 'absolute'
  document.body.append(clone)  
  element.clientWidth < clone.clientWidth ?
    output = true :
    null
  return output;
}

function resetLayoutForOverFlown(elements) {
  elements.forEach(answer => {
    if (contOverflown(answer) !== false) {
      let span = document.createElement('SPAN')
      span.style.width = '90%'
      span.textContent = answer.textContent
      let npt = answer.children[0]
      answer.textContent = ''
      answer.append(npt,span)
      answer.style.display = 'flex'
      answer.classList.add('overflown')
    }
  })
}

resetLayoutForOverFlown(answers)

.container-reading ul {
  list-style: none;
  padding: 20px;
  margin: 0;
}

.container-reading ul li {
  color: black;
  position: relative;
  width: 95%;
  font-size: 16px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

.container-reading ul li input {
  padding-right: 2rem;
}

.overflown {
  display: flex;
  justify-content: flex-start;
  align-items: center;  
}

.overflown span {  
  margin-left: .3em;
  flex-wrap: wrap;
  flex: 2;
  max-width: calc(100% - 2em);
}

<div class='container-reading'>
  <ul>
    <li class="answer-item">
      <input type="radio" name="check"> This answer is a far too long for our list items content. We will wrap its text in a span tag and flex the input and span for a more cohesive layout
    </li>
    <li class="answer-item"><input type="radio" name="check"> This answer is ok</li>
    <li class="answer-item"><input type="radio" name="check"> This answer is also ok</li>
    <li class="answer-item"><input type="radio" name="check"> This answer is ok</li>
    <li class="answer-item">
      <input type="radio" name="check"> Yet another answer that is a far too long for our list items content,so JS will determine its length and write a new layout and style for its content
    </li>
  </ul>
</div>