Span 元素 HTML 中不需要的拉伸文本答案

【问题标题】：Unwanted stretched text within Span element HTMLSpan 元素 HTML 中不需要的拉伸文本
【发布时间】：2018-07-20 21:04:37
【问题描述】：

我正在尝试在如下所示的范围内显示一条消息

<span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>`

默认情况下，此跨度没有文本，但会根据发生的错误填充错误文本。

问题是文本在元素内显得拉伸并且看起来很糟糕。我不确定用什么方法来解决这个问题。任何意见，将不胜感激。

编辑：仅当我添加“glyphicon”类时才会出现问题。

我正在使用 JS 填充，例如：

var msg = document.getElementById("ErrorMessage");
msg.innerHTML = "There has been an error";`

这里没有涉及到自定义 CSS 样式。

<div role="main">

    <span id="maincontent"/>
    <div class="container">
    <div class="jumbotron">
        <div style="height: 50px; float: center;">
            <h3>List Herd Numbers in Commonage</h3>
        </div>
        <form role="form" id="HerdForm">
            <div class="form-inline">

                <label class="control-label" for="commonage_id">Enter Commonage ID:</label>
                <input id="commonage_id" type="text" class="form-control" autofocus="autofocus"
                 placeholder="Enter ID here " />
                <button id="submitButton" type="submit" class="btn btn-primary">View</button>

            </div>
        </form>
    </div>

     <span class="glyphicon glyphicon-exclamation-sign alert alert-danger"
      id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

     <div id="loader" class="loader" hidden></div>

     <div id="result_table" hidden>

        <table class="table table-striped" id="herdTable"> 

            <thead> 
                <tr>
                    <th class="threeTH">Herd Number</th>
                    <th class="threeTH">Share</th>
                    <th class="threeTH">Active Farmer</th>
                </tr>
            </thead>
            <tbody>
            </tbody> 
        </table>
     </div> 
</div>

【问题讨论】：

请提供复制问题所需的 HTML 和 CSS。
可能是与 css 相关的问题。分享您的代码以了解
我现在已经更新了问题，当我删除 glyphicon 类时，文本似乎正确对齐，但图标也是如此
@MrLister 成功了，谢谢。您想将此作为答案发布，我会接受吗？

标签： html css glyphicons

【解决方案1】：

一个 glyphicon 不希望有除图标本身之外的其他内容。问题是 glyphicon 类附加了更多样式，这对于普通文本是不需要的。在这种情况下，字体系列！

解决方案是将 glyphicon 本身放在 ErrorMessage 范围内的自己的范围内。

span[aria-hidden='true'] {display:none}
a:active + span[aria-hidden='true'] {display:block}
a:active + span[aria-hidden='true']::after {content:'There has been an error.';}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<a>Press here to show text</a>

<span class="alert alert-danger" id="ErrorMessage" aria-hidden="true">
 <span class="glyphicon glyphicon-exclamation-sign"></span>
</span>

【讨论】：

【解决方案2】：

您可以像这样在单独的 span 标签中使用 glyphicon 图标：

<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

【讨论】：