如何在一行中显示定义列表的dt和dd？ [英] How to show dt and dd of a definition list all in one line?

问题描述

我想在详细信息页面上显示几行数据，每个页面都有同一行的标题和数据。数据显示正常，但由于我的标题有点长，所以它不适合同一条线。它延伸到下一行。例如，我希望标题演讲者与观众的互动显示在一行/一行中，而不是显示在2行上，就像这样



演讲者的互动

与观众



我一直在玩css一段时间，但似乎没有任何作用。有人可以在造型部分帮助我吗？





我尝试了什么：



这是我的代码的结构

< div> 
< h4> IndividualSessionEvaluation< / h4> 
< hr /> 
< dl class =dl-horizo​​ntal> 
 
< dt> 
 @ Html.DisplayNameFor（model => model.OnScreenPresentation）
< / dt> 
< dd> 
 @ Html.DisplayFor（model => model.OnScreenPresentation）
< / dd> 
 
< dt> 
 @ Html.DisplayNameFor（model => model.SpeakersSubjectKnowledge）
< / dt> 
< dd> 
 @ Html.DisplayFor（model => model.SpeakersSubjectKnowledge）
< / dd> 
 
< dt> 
 @ Html.DisplayNameFor（model => model.SpeakersInteractionwithAudience）
< / dt> 
< dd> 
 @ Html.DisplayFor（model => model.SpeakersInteractionwithAudience）
< / dd> 
< / dl> 
< / div> 

我的样式代码

 <风格> 
 dl {
宽度：395px; 
 font-size：15px 
} 
 
 dd，dt {
 padding-top：5px; 
 padding-bottom：5px; 
} 
 
 dt {
 float：left; 
 padding-right：5px; 
 font-weight：bolder; 
} 
 
 dt {
 clear：left; 
} 
 
 dt，dd {
 min-height：1.5em; 
} 
< / style> 

解决方案

如果该行没有空间，没有办法强制文本在那里，而不会破坏页面的美丽...

如果你不能让它打破两行，你必须通过定义削减它最大长度（你有）并告诉渲染引擎，如何处理额外的文本（溢出）...

  dl  {
  width  ：  395px;  
  white-space  ：  nowrap;   / *  文本将不会换行到下一行* /  
 溢出 ： 隐藏;   / *  额外的部分将被隐藏（这是为了保持显示漂亮）* /  
  text-overflow  ： 省略号;   / *  将添加省略号（...）以指示文本被截断* /  
} 

I want to show a few rows of data on a Details page, which each have a title and data on the same row. The data is showing fine, but since my titles are a little long, it is not fitting on the same line. It extends to the next line. For example, I want the title "Speaker's Interaction with Audience" to show in one line/row, instead it is showing on 2 lines, like this

Speaker's Interaction
with Audience

I have been playing around with the css for a while, but nothing seems to work. Can someone please help me in the styling part?


What I have tried:

This is the structure of my code

<div>
    <h4>IndividualSessionEvaluation</h4>
    <hr />
    <dl class="dl-horizontal">

        <dt>
            @Html.DisplayNameFor(model => model.OnScreenPresentation)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.OnScreenPresentation)
        </dd>   

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersSubjectKnowledge)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersSubjectKnowledge)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersInteractionwithAudience)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersInteractionwithAudience)
        </dd>
    </dl>
</div>

And my style code

<style>
    dl {
        width: 395px;
        font-size: 15px
    }

    dd, dt {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    dt {
        float: left;
        padding-right: 5px;
        font-weight: bolder;
    }

    dt {
        clear: left;
    }

    dt, dd {
        min-height: 1.5em;
    }
</style>

解决方案

If there is no room for the text on that line, there is no way to force the text there, without ruining the beauty of the page...
If you can not afford to let it break to two lines, you have to 'cut' it by defining maximum length (you have that) and tell the rendering engine, what to do with the extra text (overflow)...

dl {
  width: 395px;
  white-space: nowrap; /* text will no wrap to the next line */
  overflow: hidden; /* the extra part will be hidden (that's to keep the display pretty) */
  text-overflow: ellipsis; /* will add a ellipsis (...) to indicate that the text was truncated */
}

这篇关于如何在一行中显示定义列表的dt和dd？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！