如何使整个跨度落入新行?

2024-05-18

这个片段显示了我想要的:http://jsfiddle.net/945Df/3/ http://jsfiddle.net/945Df/3/

<div class="sup" id="pr">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong>
</div>
<div class="sup">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span>
    </strong>
</div>

我希望当 div 的宽度(在项目中,视口)没有更多空间时,跨度落入新行。

抱歉我的解释不好。我不知道该怎么做。谢谢!

编辑:在第二个示例中,短语“SEPTIEMBRE DE 2013”​​。落入新行。但“17 DE”字样仍位于上行。我想要“2013 年 9 月 17 日”。落入新行。知道了?


如果您希望跨度不换行,而是完全移到其他文本下方,您可以使用white-space: nowrap;

.date {
    text-transform: uppercase;
    color:#848484;
    white-space:nowrap;
}

Demo http://jsfiddle.net/945Df/5/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使整个跨度落入新行? 的相关文章

  • Sass 负变量值?

    我有几个 scss 选择器 其中我使用相同数量的正数和负数 如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量 但这不起作用 pad 15px padd
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • mailto:相当于电话的链接? [复制]

    这个问题在这里已经有答案了 有没有办法使用 html 和 或 JS 链接图像以便拨打电话 类似于 mailto 链接 如果可能的话 这只会让生活变得更加轻松 假设如果一个人有 Skype 是否可以通过一个按钮为他们打开 Skype 并拨打电
  • 智能位置表单字段

    我的用户注册表单上有一个文本字段location 我本质上希望这个字段能够根据 Google 地图 或同等地图 进行验证 只允许有效位置通过 最好采用类似的格式滑铁卢 伦敦 or 伦敦 英国 要求 除了位置名称之外 我还想返回该位置中心的坐
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 如何在 Electron 应用程序中通过 navigator.geolocation 获取当前位置?

    当我尝试获取当前位置时 navigator geolocation getCurrentPosition handleCoordinates handleError timeout 10000 它返回 网络位置提供商位于 https www
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • 带有旋转文本的垂直导航

    我正在尝试实现一个包含链接的垂直导航菜单 并且我已使用 css3 将链接文本旋转到 270 度 我旋转了它 因为我希望文本从下到上 问题是当我添加顶部填充时 间距不一致 你可以看到我的代码here http jsbin com ravudu
  • 确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

    我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示 并根据省略号是否正在显示来决定显示工具提示
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • 从 3.1 返回后加载 Rails 3(服务器)时出现问题

    Rails 完全菜鸟 我正在使用 Hartl 教程 到了第 4 章 CSS 4 1 2 一切看起来都很顺利 但遇到了一个问题 使页面上的文字看起来
  • 为什么盒子大小调整不适用于画布元素上的宽度/高度属性?

    让我们考虑一下这段代码 canvas width 150px height 150px canvas box sizing border box border 5px solid
  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE
  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么
  • 当td内容太宽时,表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐

  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • Cython 和类的构造函数

    我对 Cython 使用默认构造函数有疑问 我的 C 类 Node 如下 Node h class Node public Node std cerr lt lt calling no arg constructor lt lt std e
  • 使用 asp.net 发送 20,000 多封电子邮件

    我正在编写一个应用程序 需要向从我们的数据库中选择的学生发送大量电子邮件 每封电子邮件都将进行个性化 包括他们的姓名 学习课程等 因此需要一次发送一个 我可以在 SmtpClient 上循环执行此操作 但我担心我尝试发送的数字最终会遇到超时
  • PHP 中的多个插入查询[重复]

    这个问题在这里已经有答案了 我正在尝试创建一个 php html 表单 它将结果插入到狗展数据库中 问题是 无论我做什么 我都会收到此错误 查询失败 您的 SQL 语法有错误 检查与您的 MySQL 服务器版本相对应的手册 了解在 INSE
  • 为什么 iPhone 上的纹理图像需要具有二维幂?

    我正在尝试解决 iPhone 上的闪烁问题 open gl es game 我有一些没有 2 维的图像 我将用具有适当尺寸的图像替换它们 但为什么尺寸需要是 2 的幂 大多数系统 甚至许多现代显卡 需要 2 的幂纹理的原因是 mipmap
  • 在一个 Windows 服务中的单个 TCP 端口上托管多个 WCF 服务

    下面是我的主机 Windows 服务的 app config 文件片段
  • 苹果企业程序分发问题[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 这个问题涉及到Apple iOS 开发者企业计划 http developer apple com programs ios enterprise 我
  • 由于“进程崩溃”,仪器运行失败。

    我想运行以下测试 package com xxx yyy import android content Context import androidx test InstrumentationRegistry import androidx
  • 我什么时候需要将“协商客户端证书”设置为启用?

    我可以选择支持客户端证书 这就是为什么我设置Client certificates to Accept在 IIS 上 这适用于大多数机器 然而 在某些机器上 IIS 返回 500 这可以通过设置来 解决 Client certificate
  • 显式删除会话cookie会产生什么影响?

    我使用 php session 来维护用户的会话 Session 在登录后创建 在注销或超时后销毁 我需要管理面板中的一个选项来强制注销任何用户 如果他在网站上处于活动状态 我怎样才能做到这一点 我正在考虑删除临时会话文件 这应该有效地破坏
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • 加快网络抓取速度

    我正在使用一个非常简单的网络抓取工具抓取 23770 个网页scrapy 我对 scrapy 甚至 python 都很陌生 但设法编写了一个可以完成这项工作的蜘蛛 然而 它确实很慢 爬行 23770 个页面大约需要 28 小时 我看过scr
  • 如何以编程方式设置 TextBlock 前景十六进制颜色

    我必须实用地使用文本块的前景色十六进制颜色 它不起作用 请帮助我 我试过这个例子 txtHome Foreground new SolidColorBrush Colors Red 但我想使用十六进制颜色代码而不是使用 Color red
  • 我们可以拥有一台只用寄存器作为内存的计算机吗? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 寄存器是计算机中最快的存储器 那么如果我们想构建一台只有寄存器甚至没有缓存的计算机 可能吗 我什至考虑用寄存器代替磁盘 尽管它们本质上是易
  • 增加在 Azure 上运行的 Dockerized ASP.NET Core 站点的最大上传大小限制?

    以下是应用程序的架构 使用 ASP NET Core 编写的 Web API Dockerfile 使用以下命令构建 Web 应用程序microsoft dotnet 2 1 sdk并使用执行 APImicrosoft dotnet asp
  • WPF TabControl,用C#代码更改TabItem的背景颜色

    嗨 我认为这是一个初学者的问题 我搜索了所有相关问题 但所有这些都由 xaml 回答 但是 我需要的是后台代码 我有一个 TabControl 我需要设置其项目的背景颜色 我需要在选择 取消选择和悬停时为项目设置不同的颜色 非常感谢你的帮助
  • 如何获取nodejs程序中的nodejs版本?

    In a Node js 的调试器 https github com rocky trepanjs 有一个命令显示V8版本和调试器包版本 如何获取nodejs版本 我想我基本上可以运行命令node version or nodejs ver
  • 如何在 Perl 中复制整个目录?

    我需要将整个目录复制到某个位置 最好的方法是什么 File Copy正如我所见 仅逐个文件复制 顺便说一句 我在Windows下工作 感谢帮助 也许调查一下文件 复制 递归 http metacpan org pod File Copy R
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a