files text ellipsis layout done

This commit is contained in:
chiayin
2023-02-08 15:16:47 +08:00
parent 1e5cac35c7
commit 30eff75b83

View File

@@ -6,7 +6,7 @@
<!-- card group 最多六個--> <!-- card group 最多六個-->
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4"> <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
<!-- card item v-for --> <!-- card item v-for -->
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300"> <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
<a href="" class="h-full flex flex-col justify-between"> <a href="" class="h-full flex flex-col justify-between">
<div> <div>
<figure class="mb-2"> <figure class="mb-2">
@@ -15,8 +15,8 @@
<h3 class="text-sm font-medium mb-2"> <h3 class="text-sm font-medium mb-2">
File type File type
</h3> </h3>
<p class="text-sm text-neutral-500"> <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
Daily operation records of...... Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
</p> </p>
</div> </div>
<p class="text-sm text-neutral-500"> <p class="text-sm text-neutral-500">
@@ -126,7 +126,7 @@
</figure> </figure>
</div> </div>
<div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)] scrollbar"> <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)] scrollbar">
<table class="w-full border-separate border-spacing-x-4 text-sm "> <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
<thead class="sticky top-0 bg-neutral-10"> <thead class="sticky top-0 bg-neutral-10">
<tr> <tr>
<th> <th>
@@ -390,10 +390,10 @@
<style scoped lang="scss"> <style scoped lang="scss">
table { table {
th { th {
@apply border-b border-neutral-500 p-3 text-left font-black @apply border-b border-neutral-500 p-3 text-left font-black whitespace-nowrap break-keep overflow-hidden text-ellipsis
} }
td { td {
@apply border-b border-neutral-300 p-3 font-medium break-all @apply border-b border-neutral-300 p-3 font-medium whitespace-nowrap break-keep overflow-hidden text-ellipsis
} }
tr { tr {
@apply hover:bg-primary/50 duration-300 @apply hover:bg-primary/50 duration-300