1
votes

Comment empêcher le texte de la plage de passer sous le contenu de la plage de frères?

J'ai deux éléments span l'un à côté de l'autre. Le premier span a l'élément symbol, le second a le texte. Le texte est trop long et passe sous le symbole. Existe-t-il un moyen d'empêcher le texte de passer sous le premier span ? Voici un exemple:

?  Here we have some text that can be too long sometimes. In that case text will 
   wrap under question mark symbol from the span element above.    
   - Test User Name 02/07/2019

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <span class="symbol">?</span>
        <span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
        <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

Existe-t-il un moyen d'empêcher le texte de passer sous l'étendue des symboles?

Cela devrait ressembler à ceci:

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

span.symbol {
  color: red;
  font-weight: bold;
}

html css css-tables internet-explorer internet-explorer-9

0 commentaires

3 Réponses :

2
votes

Enveloppez le contenu du texte dans un élément div ( text-wrap dans le code ci-dessous), ainsi que tout ce qui se trouve à l'intérieur du td dans un élément div ( wrap ) et en faire une flexbox - voir la démo ci-dessous:

 

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <div class="wrap">
          <span class="symbol">?</span>
          <div class="text-wrap">
            <span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
            <br><span style="color:red">- Test User Name 02/07/2019</span></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

span.symbol {
  color: red;
  font-weight: bold;
}

.wrap {
  display: table;
}

.wrap>* {
  display: table-cell;
}

  Une solution non flexible utilisant des  tables  utilisant le même balisage que ci-dessus: 
  
 

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <div class="wrap">
          <span class="symbol">?</span>
          <div class="text-wrap">
            <span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
            <br><span style="color:red">- Test User Name 02/07/2019</span></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

.wrap {
  display: flex;
}

span.symbol {
  color: red;
  font-weight: bold;
}

1 commentaires

J'ai un problème car la boîte flexible n'est pas prise en charge dans IE. L'une des exigences de mon projet est de prendre en charge IE (version 9 et plus). Existe-t-il un moyen d'y parvenir avec le CSS brut?

1
votes

Créez l'élément symbol float et augmentez suffisamment la hauteur:

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <span class="symbol">?</span>
        <span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
        <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

span.symbol {
  color: red;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  padding-bottom: 50px;
}

1 commentaires

Cela fonctionne mais a le problème / la fonctionnalité de forcer le .symbol à toujours avoir une hauteur d'au moins 50px (même si le .text est court). De plus, si le texte est TRÈS long, un remplissage de 50 pixels peut ne pas être suffisant.

2
votes

Sans changer le HTML, vous pouvez définir les étendues sur display: table-cell; . EG:

<table class="tbl">
  <thead>
    <tr>
      <th colspan="2">Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td class="symbol">?</td>
        <td class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.
          <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
    <tr>
      <td class="symbol">?</td>
        <td class="text">Here we have some that is short.
          <br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

De cette façon, ils seront assis côte à côte comme ceci:

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

td.symbol {
  color: red;
  font-weight: bold;
  vertical-align:top;
}

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Form validation text description and some instructions.</td>
    </tr>
    <tr>
      <td>
        <div class="symbol">?</div>
        <div class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.
          <br><span style="color:red">- Test User Name 02/07/2019</span></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="symbol">?</div>
        <div class="text">Here we have some text that is short.
          <br><span style="color:red">- Test User Name 02/07/2019</span></div>
      </td>
    </tr>
  </tbody>
</table>

Cependant, vous devriez vraiment envelopper les deux blocs de contenu dans des éléments que vous pouvez contrôler plus facilement.

table.tbl {
  font-size: 12px;
  width: 500px;
}

table.tbl thead th {
  text-align: left;
}

table.tbl tbody td {
  text-align: left;
}

.symbol {
  color: red;
  font-weight: bold;
}

.symbol,
.text {
  display: table-cell;
}

<table class="tbl">
  <thead>
    <tr>
      <th>Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
			<td>Form validation text description and some instructions.</td>
		</tr>
    <tr>
      <td>
        <span class="symbol">?</span>
				<span class="text">Here we have some text that can be too long sometimes. In that case text will wrap under question mark symbol from the span element above.</span>
				<br><span style="color:red">- Test User Name 02/07/2019</span></td>
    </tr>
  </tbody>
</table>

Puisque vous utilisez de toute façon un tableau, pourquoi ne pas avoir simplement un tableau imbriqué ou plusieurs cellules et colspans? EG:

table.tbl {
	font-size: 12px;
  width: 500px;
}
table.tbl thead th {
	text-align: left;
}
table.tbl tbody td {
	text-align: left;
}
span.symbol {
	color: red;
	font-weight: bold;
}
span.symbol, span.text {
  display:table-cell;
}

span.symbol, span.text {
  display:table-cell;
}

0 commentaires