使用带最大宽度的空白 nowrap答案

【问题标题】：using white-space nowrap with max-width使用带最大宽度的空白 nowrap
【发布时间】：2017-08-08 04:14:06
【问题描述】：

我想制作一些带有分隔线的自定义标题。我设置的最大宽度文本为 40%，行分隔符显示在文本之后。主要思想是，如果文本少于 40% 的行是从文本结束的地方开始，但如果文本大于 40%，它会换行。

不幸的是，如果我不使用 white-space: nowrap; 到文本 - 分隔线会使我的文本崩溃，但是当我使用 white-space: nowrap max-width: 40% 时不起作用。我哪里错了？

更新。我只想要当文本很大时 - 它填充所有最大宽度，并且分隔线从 40% 开始，但是当文本很小时 - 分隔线从文本结尾开始，而不是从 40%..

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- first example -->
              <div class="addition-hr">
                <table style="width: 100%; margin-bottom: 5px">
                  <tr style="width: 100%">
                    <td style="max-width: 40%; margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px; white-space: nowrap;">
                      <span style="position: relative"><b>Lorem ipsum dolor sit amet</b></span>
                    </td>
                    <td style="width: inherit; display: table-cell">
                      <table style="width: 100%">
                        <tr>
                          <td style="width: 100%; margin-top: 30px; margin-bottom: 30px; height: 1px; display: block;
                          background-image: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:    -moz-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:     -ms-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:      -o-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));">
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
              
              <!-- second example -->
              <div class="addition-hr">
                <table style="width: 100%; margin-bottom: 5px">
                  <tr style="width: 100%">
                    <td style="max-width: 40%; margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px; white-space: nowrap;">
                      <span style="position: relative"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus erat sit amet nibh fermentum, ut bibendum ex euismod. Cras at quam eu diam auctor feugiat. Nam sit amet urna ullamcorper nunc pellentesque iaculis. Aliquam nec sem ullamcorper, maximus ligula sed, venenatis sem.</b></span>
                    </td>
                    <td style="width: inherit; display: table-cell">
                      <table style="width: 100%">
                        <tr>
                          <td style="width: 100%; margin-top: 30px; margin-bottom: 30px; height: 1px; display: block;
                          background-image: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:    -moz-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:     -ms-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));
                          background-image:      -o-linear-gradient(right, rgba(0,0,0,0), rgba(160,160,160,0.75));">
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
	
</body>
</html>

【问题讨论】：

标签： html css html-table

【解决方案1】：

使用flexbox

.flex {
  display: flex;
  align-items: center;
}

.flex.wrap >div:first-of-type {
 flex: 0 40%;
}

.line {
  flex: 1;
  height: 1px;
  margin: 0  0 0 5px;
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
}

<div class="flex">
  <div>test test</div>
  <div class="line"></div>
</div>


<div class="flex wrap">
  <div>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    test test test test test test test test test test </div>
  <div class="line"></div>
</div>

旧方法

使用width 而不是max-width，因为您使用的是table

table {
  width: 100%;
  margin-bottom: 5px
}

.td1 {
  width: 40%;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 15px 0 15px;

}

.td2 {
  width: inherit;
  display: table-cell
}

.td2 td {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  height: 1px;
  display: block;
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(160, 160, 160, 0.75));

}

.tbl1 .td1 {
 white-space:nowrap;
}

<!-- first example -->
  <div class="addition-hr">
    <table class="tbl1">
      <tr style="width: 100%">
        <td class="td1">
          <span><b>Lorem ipsum dolor sit amet</b></span>
        </td>
        <td class="td2">
          <table>
            <tr>
              <td>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <!-- second example -->
  <div class="addition-hr">
    <table class="tbl2">
      <tr style="width: 100%">
        <td class="td1">
          <span><b>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </b></span>
        </td>
        <td class="td2">
          <table>
            <tr>
              <td>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>

【讨论】：

是的，它有效！非常感谢，我以前没有使用 flex box，但现在我发现它很棒，所以我会）
你应该看看 flexbox ，了解后会更容易；）
我一定会的！）