html - 使用具有最大宽度的空白 nowrap-6ren

html - 使用具有最大宽度的空白 nowrap

转载作者：行者123 更新时间：2023-11-27 23:16:33

25

4

我想制作一些带有分隔线的自定义标题。我将最大宽度文本设置为 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>

最佳答案

使用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>

关于html - 使用具有最大宽度的空白 nowrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42843380/

25

4

0

文章推荐： javascript - 使用 Angular 2 进行动态表单验证

文章推荐： c++ - DirectX 字体不绘制？

文章推荐： c++ - cin.getline() 没有将\0 添加到数组 C++ 的末尾

文章推荐： html - 显示属性 table-cell 或 inline-block

CSS 在一行中显示元素与 nowrap
我现在是我的 div 的宽度，但我不知道我的 child button 和 ins 标签的高度。ins标签有nowrap。我想用 ins 标签在一行中显示 button。 div { bor
html表格空白: nowrap not working?
我有一个 KnockoutJS 模板，它创建一个 input[type=text] 和一个 select 彼此相邻，没有中间。然而，它在 white-space: nowrap; 之间设置了一个换行
javascript - 选择带空格的父级高度 :nowrap
所以我有这些 DIV，我已安排它们在父级内部向左向右滑动。请参阅以下 JSFiddle 以查看设计: http://jsfiddle.net/StevP/C9WL7/ 您可以看到，通过将第一个子 D
css - 父级在子级空白之后太大 : nowrap
在此图像中，最后一个框中有额外的空间，如红色箭头所示。如何解决？最后一个短语周围有 white-space: nowrap。 JSFiddle .outer { text-align: cent
html - 使用具有最大宽度的空白 nowrap
我想制作一些带有分隔线的自定义标题。我将最大宽度文本设置为 40%，行分隔符显示在文本之后。主要想法是，如果文本少于 40%，则行从文本结束处开始，但如果文本大于 40%，则换行。不幸的是，如果我不
Javascript 切换按钮到空白换行/nowrap
我正在尝试构建一个切换开关，单击它可以添加或删除空格换行。必须包裹的div不能有ID，所以需要通过它的类来识别。在本例中为“文本”。在整个页面上，该类仅使用一次。我构建了这个，但它不起作用。我哪里
html - 使缩略图水平滚动而不使用 nowrap
我正在尝试使用 CSS 进行以下设计: 想法是让它在全 Angular 容器中水平滚动。我在包装器中添加了 white-space: nowrap，但由于文本太长，它会从容器中消失。这是问题的屏幕截
html - nowrap 元素溢出它的盒子
使用 nowrap 和列表项会出现一些奇怪的行为。如何让填充在 chrome 中正确应用于“Testing 123”li？ (测试 123 中的“3”超出了定义的宽度并侵占了填充)。基本上我想要实现
html - 新行 "NoWrap"
不使用 table 可以将标签放在每个文本框上方吗？我的问题是当我尝试在“NoWrap”中放置“新行”时。基本上我得到了一个数组的数组，有“名称”和“值”，值将由用户更改，所以第一组元素将并排显示，
html - 与空白 :nowrap
我承认，当我不想让单词间断时(例如表格标题)，我有在单词之间使用的习惯。我真的应该使用 white-space:nowrap 来设置我的元素样式吗？如果我唯一想做的就是避免换行，这两者有什么优
html - Nowrap/不要在输入后换行
如果我有几个输入( radio 或选项)后跟它们的标签，都在同一行。我是如何做到的，这样它就不会在 radio 后断线，而是在标签后如果需要断线。 First radio Second radio T
html - 跨度上的空白 nowrap
在这种情况下: Some Text 我想在必要时在我的文本上换行，但我不希望我的跨度换行，我希望它始终坚持文本的一部分。我该怎么做？谢谢，最佳答案我如何通过将一
CSS nowrap 用于文本元素以外的其他元素？
有没有办法避免 div 的换行当内容不仅仅是文本时的内容，例如几个按钮？最佳答案 white-space:nowrap; 应该可以解决问题。 #foo { white-space:nowrap;
html - Flexbox "nowrap"值不起作用
这是我的代码中不起作用的部分: .copyright { display: flex; flex-wrap: nowrap; /* This is not working */ col
html - Bootstrap 行中的 nowrap
我想让标题包含 Logo 和菜单。我做了一行和两列。我使用了 Bootstrap 类。当我将窗口大小调整为较小时，菜单会在 Logo 下跳转(看我的图片)。在屏幕宽度较小且菜单在 Logo 下跳转的
jquery - 具有 "nowrap"要求的数据表固定列
我有大量表格数据，其中最左边的列需要始终显示，并且每一行只占一行 - 这可以通过 CSS 指令 white-space: nowrap 来实现>. 我选择了DataTables jQuery plug
html - 在 nowraps 之间换行
我有一个应该内联显示的链接列表。问题是我不希望文本在链接中间换行。如果它需要换行，它应该只在链接之间进行换行。因此，我已将 white-space:nowrap; 属性添加到我的链接中。但是生成的
html - 如何使用 nowrap 在元素的子元素中换行？
我有一个设置 word-wrap:break-word 的问题。结果让这个div显示了scroll-x。但问题是 blockquote 元素不再是 break-word 的样式，它正在向正确的方向堆叠
html - 如何更改空白 : nowrap? 的默认边距
这是 JSFIDDLE我想要制作 img 标签:margin-right:1px;但是当我设置空白:nowrap;我不能那样做。我该怎么办？？最佳答案试试这个 http://jsfiddle.ne
css - Firefox 中的空白 nowrap
我正在使用内部有 ul 列表的自定义滚动条。当 ul 列表或 li 内容扩展时，滚动条也会扩展。我在主 div 中使用了 white-space:nowrap 以便 ul 宽度得到扩展，但它仅在 c

首页

博学

6Ren·AI

商城

html - 使用具有最大宽度的空白 nowrap